Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add new typography scale feature flag #4701

Merged
merged 2 commits into from
Feb 5, 2024
Merged

Add new typography scale feature flag #4701

merged 2 commits into from
Feb 5, 2024

Conversation

owenatgov
Copy link
Contributor

@owenatgov owenatgov commented Jan 30, 2024 •
edited
Loading

  • adds the feature flag $govuk-new-typography-scale
  • splits out the new and old type scale maps
  • applies the new feature flag across the codebase inline with changes in type-scale
  • sets the new flag to on in the review app

Closes #4629

@owenatgov owenatgov requested a review from a team January 30, 2024 12:05
@owenatgov owenatgov linked an issue Jan 30, 2024 that may be closed by this pull request
Apply typography feature flag to the type scale branch #4629
Closed
@github-actions GitHub Actions
Copy link

github-actions bot commented Jan 30, 2024 •
edited
Loading

📋 Stats

File sizes

File Size
dist/govuk-frontend-development.min.css 112.45 KiB
dist/govuk-frontend-development.min.js 38.58 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js 78.74 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs 73.99 KiB
packages/govuk-frontend/dist/govuk/all.mjs 3.86 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs 359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css 112.44 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js 38.57 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs 5.38 KiB

Modules

File Size
all.mjs 70.32 KiB
components/accordion/accordion.mjs 21.67 KiB
components/button/button.mjs 4.7 KiB
components/character-count/character-count.mjs 21.24 KiB
components/checkboxes/checkboxes.mjs 5.83 KiB
components/error-summary/error-summary.mjs 6.57 KiB
components/exit-this-page/exit-this-page.mjs 16.08 KiB
components/header/header.mjs 4.46 KiB
components/notification-banner/notification-banner.mjs 4.93 KiB
components/radios/radios.mjs 4.83 KiB
components/skip-link/skip-link.mjs 4.39 KiB
components/tabs/tabs.mjs 10.16 KiB

View stats and visualisations on the review app

Action run for 490628a

@github-actions GitHub Actions
Copy link

github-actions bot commented Jan 30, 2024 •
edited
Loading

Stylesheets changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
index de1d6fec7..081ea2694 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -170,8 +170,8 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1.1875rem;
-    line-height: 1.3157894737;
+    font-size: 1rem;
+    line-height: 1.25;
     color: #0b0c0c;
     margin-top: 0;
     margin-bottom: 15px;
@@ -181,7 +181,19 @@
 
 @media print {
     .govuk-list {
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-list {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print {
+    .govuk-list {
         font-size: 14pt;
         line-height: 1.15;
         color: #000
@@ -281,8 +293,8 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 700;
-    font-size: 1.6875rem;
-    line-height: 1.1111111111;
+    font-size: 1.5rem;
+    line-height: 1.0416666667;
     display: block;
     margin-top: 0;
     margin-bottom: 20px
@@ -321,8 +333,8 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 700;
-    font-size: 1.3125rem;
-    line-height: 1.1904761905;
+    font-size: 1.125rem;
+    line-height: 1.1111111111;
     display: block;
     margin-top: 0;
     margin-bottom: 15px
@@ -361,8 +373,8 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 700;
-    font-size: 1.1875rem;
-    line-height: 1.3157894737;
+    font-size: 1rem;
+    line-height: 1.25;
     display: block;
     margin-top: 0;
     margin-bottom: 15px
@@ -371,7 +383,19 @@
 @media print {
     .govuk-heading-s {
         color: #000;
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-heading-s {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print {
+    .govuk-heading-s {
         font-size: 14pt;
         line-height: 1.15
     }
@@ -388,8 +412,8 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1.3125rem;
-    line-height: 1.1904761905;
+    font-size: 1.125rem;
+    line-height: 1.1111111111;
     display: block;
     margin-bottom: 5px;
     color: #505a5f
@@ -420,8 +444,8 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1.3125rem;
-    line-height: 1.1904761905;
+    font-size: 1.125rem;
+    line-height: 1.1111111111;
     display: block;
     margin-bottom: 5px;
     color: #505a5f
@@ -458,15 +482,27 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1.1875rem;
-    line-height: 1.3157894737;
+    font-size: 1rem;
+    line-height: 1.25;
     display: block;
     color: #505a5f
 }
 
 @media print {
     .govuk-caption-m {
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-caption-m {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print {
+    .govuk-caption-m {
         font-size: 14pt;
         line-height: 1.15
     }
@@ -479,8 +515,8 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1.3125rem;
-    line-height: 1.1904761905;
+    font-size: 1.125rem;
+    line-height: 1.1111111111;
     margin-top: 0;
     margin-bottom: 20px
 }
@@ -527,8 +563,8 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1.1875rem;
-    line-height: 1.3157894737;
+    font-size: 1rem;
+    line-height: 1.25;
     margin-top: 0;
     margin-bottom: 15px
 }
@@ -538,7 +574,23 @@
     .govuk-body,
     .govuk-body-m {
         color: #000;
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+
+    .govuk-body,
+    .govuk-body-m {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print {
+
+    .govuk-body,
+    .govuk-body-m {
         font-size: 14pt;
         line-height: 1.15
     }
@@ -558,8 +610,8 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1rem;
-    line-height: 1.25;
+    font-size: .875rem;
+    line-height: 1.1428571429;
     margin-top: 0;
     margin-bottom: 15px
 }
@@ -567,7 +619,19 @@
 @media print {
     .govuk-body-s {
         color: #000;
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-body-s {
+        font-size: 1rem;
+        line-height: 1.25
+    }
+}
+
+@media print {
+    .govuk-body-s {
         font-size: 14pt;
         line-height: 1.2
     }
@@ -585,8 +649,8 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: .875rem;
-    line-height: 1.4285714286;
+    font-size: .75rem;
+    line-height: 1.25;
     margin-top: 0;
     margin-bottom: 15px
 }
@@ -594,7 +658,19 @@
 @media print {
     .govuk-body-xs {
         color: #000;
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-body-xs {
+        font-size: .875rem;
+        line-height: 1.4285714286
+    }
+}
+
+@media print {
+    .govuk-body-xs {
         font-size: 12pt;
         line-height: 1.2
     }
@@ -724,8 +800,8 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1.1875rem;
-    line-height: 1;
+    font-size: 1rem;
+    line-height: 1.1875;
     display: inline-block;
     max-width: 100%;
     margin-top: 5px;
@@ -735,7 +811,19 @@
 
 @media print {
     .govuk-button-group .govuk-link {
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-button-group .govuk-link {
+        font-size: 1.1875rem;
+        line-height: 1
+    }
+}
+
+@media print {
+    .govuk-button-group .govuk-link {
         font-size: 14pt;
         line-height: 19px
     }
@@ -1075,8 +1163,8 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 700;
-    font-size: 1.3125rem;
-    line-height: 1.1904761905;
+    font-size: 1.125rem;
+    line-height: 1.1111111111;
     color: #0b0c0c;
     display: block;
     margin-bottom: 0;
@@ -1149,8 +1237,8 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1.1875rem;
-    line-height: 1.3157894737;
+    font-size: 1rem;
+    line-height: 1.25;
     position: relative;
     z-index: 1;
     margin-bottom: 9px;
@@ -1164,7 +1252,19 @@
 
 @media print {
     .govuk-frontend-supported .govuk-accordion__show-all {
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-frontend-supported .govuk-accordion__show-all {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print {
+    .govuk-frontend-supported .govuk-accordion__show-all {
         font-size: 14pt;
         line-height: 1.15
     }
@@ -1364,12 +1464,19 @@
 }
 
 .govuk-frontend-supported .govuk-accordion__section-toggle {
-    font-size: 1.1875rem;
-    line-height: 1.3157894737;
+    font-size: 1rem;
+    line-height: 1.25;
     font-weight: 400;
     color: #1d70b8
 }
 
+@media (min-width:40.0625em) {
+    .govuk-frontend-supported .govuk-accordion__section-toggle {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
 @media print {
     .govuk-frontend-supported .govuk-accordion__section-toggle {
         font-size: 14pt;
@@ -1415,8 +1522,8 @@
 }
 
 .govuk-back-link {
-    font-size: 1rem;
-    line-height: 1.25;
+    font-size: .875rem;
+    line-height: 1.1428571429;
     font-family: GDS Transport, arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -1430,6 +1537,13 @@
     padding-left: .875em
 }
 
+@media (min-width:40.0625em) {
+    .govuk-back-link {
+        font-size: 1rem;
+        line-height: 1.25
+    }
+}
+
 @media print {
     .govuk-back-link {
         font-size: 14pt;
@@ -1545,8 +1659,8 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1rem;
-    line-height: 1.25;
+    font-size: .875rem;
+    line-height: 1.1428571429;
     color: #0b0c0c;
     margin-top: 15px;
     margin-bottom: 10px
@@ -1554,7 +1668,19 @@
 
 @media print {
     .govuk-breadcrumbs {
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-breadcrumbs {
+        font-size: 1rem;
+        line-height: 1.25
+    }
+}
+
+@media print {
+    .govuk-breadcrumbs {
         font-size: 14pt;
         line-height: 1.2;
         color: #000
@@ -1722,8 +1848,8 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1.1875rem;
-    line-height: 1;
+    font-size: 1rem;
+    line-height: 1.1875;
     box-sizing: border-box;
     display: inline-block;
     position: relative;
@@ -1743,7 +1869,19 @@
 
 @media print {
     .govuk-button {
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-button {
+        font-size: 1.1875rem;
+        line-height: 1
+    }
+}
+
+@media print {
+    .govuk-button {
         font-size: 14pt;
         line-height: 19px
     }
@@ -1884,7 +2022,7 @@
 
 .govuk-button--start {
     font-weight: 700;
-    font-size: 1.3125rem;
+    font-size: 1.125rem;
     line-height: 1;
     display: inline-flex;
     min-height: auto;
@@ -1924,8 +2062,8 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 700;
-    font-size: 1.1875rem;
-    line-height: 1.3157894737;
+    font-size: 1rem;
+    line-height: 1.25;
     display: block;
     margin-top: 0;
     margin-bottom: 15px;
@@ -1935,7 +2073,19 @@
 
 @media print {
     .govuk-error-message {
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-error-message {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print {
+    .govuk-error-message {
         font-size: 14pt;
         line-height: 1.15
     }
@@ -1946,15 +2096,27 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1.1875rem;
-    line-height: 1.3157894737;
+    font-size: 1rem;
+    line-height: 1.25;
     margin-bottom: 15px;
     color: #505a5f
 }
 
 @media print {
     .govuk-hint {
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-hint {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print {
+    .govuk-hint {
         font-size: 14pt;
         line-height: 1.15
     }
@@ -1974,8 +2136,8 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1.1875rem;
-    line-height: 1.3157894737;
+    font-size: 1rem;
+    line-height: 1.25;
     color: #0b0c0c;
     display: block;
     margin-bottom: 5px
@@ -1983,7 +2145,19 @@
 
 @media print {
     .govuk-label {
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-label {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print {
+    .govuk-label {
         font-size: 14pt;
         line-height: 1.15;
         color: #000
@@ -2017,8 +2191,8 @@
 }
 
 .govuk-label--l {
-    font-size: 1.6875rem;
-    line-height: 1.1111111111
+    font-size: 1.5rem;
+    line-height: 1.0416666667
 }
 
 @media (min-width:40.0625em) {
@@ -2036,8 +2210,8 @@
 }
 
 .govuk-label--m {
-    font-size: 1.3125rem;
-    line-height: 1.1904761905
+    font-size: 1.125rem;
+    line-height: 1.1111111111
 }
 
 @media (min-width:40.0625em) {
@@ -2067,7 +2241,7 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1.1875rem;
+    font-size: 1rem;
     line-height: 1.25;
     box-sizing: border-box;
     display: block;
@@ -2083,7 +2257,19 @@
 
 @media print {
     .govuk-textarea {
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-textarea {
+        font-size: 1.1875rem;
+        line-height: 1.25
+    }
+}
+
+@media print {
+    .govuk-textarea {
         font-size: 14pt;
         line-height: 1.25
     }
@@ -2171,8 +2357,8 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1.1875rem;
-    line-height: 1.3157894737;
+    font-size: 1rem;
+    line-height: 1.25;
     color: #0b0c0c;
     box-sizing: border-box;
     display: table;
@@ -2184,7 +2370,19 @@
 
 @media print {
     .govuk-fieldset__legend {
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-fieldset__legend {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print {
+    .govuk-fieldset__legend {
         font-size: 14pt;
         line-height: 1.15;
         color: #000
@@ -2218,8 +2416,8 @@
 }
 
 .govuk-fieldset__legend--l {
-    font-size: 1.6875rem;
-    line-height: 1.1111111111
+    font-size: 1.5rem;
+    line-height: 1.0416666667
 }
 
 @media (min-width:40.0625em) {
@@ -2237,8 +2435,8 @@
 }
 
 .govuk-fieldset__legend--m {
-    font-size: 1.3125rem;
-    line-height: 1.1904761905
+    font-size: 1.125rem;
+    line-height: 1.1111111111
 }
 
 @media (min-width:40.0625em) {
@@ -2367,8 +2565,8 @@ screen and (forced-colors:active) {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1.1875rem;
-    line-height: 1.3157894737;
+    font-size: 1rem;
+    line-height: 1.25;
     color: #0b0c0c;
     width: 40px;
     margin-bottom: 10px;
@@ -2377,7 +2575,19 @@ screen and (forced-colors:active) {
 
 @media print {
     .govuk-checkboxes__divider {
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-checkboxes__divider {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print {
+    .govuk-checkboxes__divider {
         font-size: 14pt;
         line-height: 1.15;
         color: #000
@@ -2493,8 +2703,8 @@ screen and (forced-colors:active) {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1.1875rem;
-    line-height: 1.3157894737;
+    font-size: 1rem;
+    line-height: 1.25;
     box-sizing: border-box;
     width: 100%;
     height: 2.5rem;
@@ -2508,7 +2718,19 @@ screen and (forced-colors:active) {
 
 @media print {
     .govuk-input {
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-input {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print {
+    .govuk-input {
         font-size: 14pt;
         line-height: 1.15
     }
@@ -2606,8 +2828,8 @@ screen and (forced-colors:active) {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1.1875rem;
-    line-height: 1.3157894737;
+    font-size: 1rem;
+    line-height: 1.25;
     box-sizing: border-box;
     display: flex;
     align-items: center;
@@ -2627,7 +2849,23 @@ screen and (forced-colors:active) {
 
     .govuk-input__prefix,
     .govuk-input__suffix {
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+
+    .govuk-input__prefix,
+    .govuk-input__suffix {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print {
+
+    .govuk-input__prefix,
+    .govuk-input__suffix {
         font-size: 14pt;
         line-height: 1.15
     }
@@ -2694,8 +2932,8 @@ screen and (forced-colors:active) {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1.1875rem;
-    line-height: 1.3157894737;
+    font-size: 1rem;
+    line-height: 1.25;
     color: #0b0c0c;
     margin-bottom: 20px;
     display: block
@@ -2703,7 +2941,19 @@ screen and (forced-colors:active) {
 
 @media print {
     .govuk-details {
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-details {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print {
+    .govuk-details {
         font-size: 14pt;
         line-height: 1.15;
         color: #000
@@ -2851,8 +3101,8 @@ screen and (forced-colors:active) {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1.1875rem;
-    line-height: 1.3157894737;
+    font-size: 1rem;
+    line-height: 1.25;
     color: #0b0c0c;
     padding: 15px;
     margin-bottom: 30px;
@@ -2861,7 +3111,19 @@ screen and (forced-colors:active) {
 
 @media print {
     .govuk-error-summary {
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-error-summary {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print {
+    .govuk-error-summary {
         font-size: 14pt;
         line-height: 1.15;
         color: #000
@@ -2880,8 +3142,8 @@ screen and (forced-colors:active) {
 }
 
 .govuk-error-summary__title {
-    font-size: 1.3125rem;
-    line-height: 1.1904761905;
+    font-size: 1.125rem;
+    line-height: 1.1111111111;
     font-weight: 700;
     margin-top: 0;
     margin-bottom: 15px
@@ -3054,8 +3316,8 @@ screen and (forced-colors:active) {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1.1875rem;
-    line-height: 1.3157894737;
+    font-size: 1rem;
+    line-height: 1.25;
     color: #0b0c0c;
     max-width: 100%;
     margin-left: -5px;
@@ -3064,7 +3326,19 @@ screen and (forced-colors:active) {
 
 @media print {
     .govuk-file-upload {
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-file-upload {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print {
+    .govuk-file-upload {
         font-size: 14pt;
         line-height: 1.15;
         color: #000
@@ -3093,8 +3367,8 @@ screen and (forced-colors:active) {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1.1875rem;
-    line-height: 1.3157894737;
+    font-size: .875rem;
+    line-height: 1.1428571429;
     padding-top: 25px;
     padding-bottom: 15px;
     border-top: 1px solid #b1b4b6;
@@ -3104,9 +3378,21 @@ screen and (forced-colors:active) {
 
 @media print {
     .govuk-footer {
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-footer {
+        font-size: 1rem;
+        line-height: 1.25
+    }
+}
+
+@media print {
+    .govuk-footer {
         font-size: 14pt;
-        line-height: 1.15
+        line-height: 1.2
     }
 }
 
@@ -3335,7 +3621,7 @@ only screen and (min-resolution:2dppx) {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1rem;
+    font-size: .875rem;
     line-height: 1;
     border-bottom: 10px solid #fff;
     color: #fff;
@@ -3344,7 +3630,19 @@ only screen and (min-resolution:2dppx) {
 
 @media print {
     .govuk-header {
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-header {
+        font-size: 1rem;
+        line-height: 1
+    }
+}
+
+@media print {
+    .govuk-header {
         font-size: 14pt;
         line-height: 1
     }
@@ -3393,7 +3691,7 @@ only screen and (min-resolution:2dppx) {
 }
 
 .govuk-header__product-name {
-    font-size: 1.3125rem;
+    font-size: 1.125rem;
     line-height: 1;
     font-weight: 400;
     display: inline-table;
@@ -3498,8 +3796,8 @@ only screen and (min-resolution:2dppx) {
 .govuk-header__service-name {
     display: inline-block;
     margin-bottom: 10px;
-    font-size: 1.3125rem;
-    line-height: 1.1904761905;
+    font-size: 1.125rem;
+    line-height: 1.1111111111;
     font-weight: 700
 }
 
@@ -3553,8 +3851,8 @@ only screen and (min-resolution:2dppx) {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1rem;
-    line-height: 1.25;
+    font-size: .875rem;
+    line-height: 1.1428571429;
     position: absolute;
     top: 13px;
     right: 0;
@@ -3571,7 +3869,19 @@ only screen and (min-resolution:2dppx) {
 
 @media print {
     .govuk-header__menu-button {
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-header__menu-button {
+        font-size: 1rem;
+        line-height: 1.25
+    }
+}
+
+@media print {
+    .govuk-header__menu-button {
         font-size: 14pt;
         line-height: 1.2
     }
@@ -3673,12 +3983,19 @@ only screen and (min-resolution:2dppx) {
 }
 
 .govuk-header__navigation-item a {
-    font-size: 1rem;
-    line-height: 1.25;
+    font-size: .875rem;
+    line-height: 1.1428571429;
     font-weight: 700;
     white-space: nowrap
 }
 
+@media (min-width:40.0625em) {
+    .govuk-header__navigation-item a {
+        font-size: 1rem;
+        line-height: 1.25
+    }
+}
+
 @media print {
     .govuk-header__navigation-item a {
         font-size: 14pt;
@@ -3729,8 +4046,8 @@ only screen and (min-resolution:2dppx) {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1.1875rem;
-    line-height: 1.3157894737;
+    font-size: 1rem;
+    line-height: 1.25;
     color: #0b0c0c;
     padding: 15px;
     margin-top: 20px;
@@ -3741,7 +4058,19 @@ only screen and (min-resolution:2dppx) {
 
 @media print {
     .govuk-inset-text {
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-inset-text {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print {
+    .govuk-inset-text {
         font-size: 14pt;
         line-height: 1.15;
         color: #000
@@ -3769,8 +4098,8 @@ only screen and (min-resolution:2dppx) {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1.1875rem;
-    line-height: 1.3157894737;
+    font-size: 1rem;
+    line-height: 1.25;
     margin-bottom: 30px;
     border: 5px solid #1d70b8;
     background-color: #1d70b8
@@ -3778,7 +4107,19 @@ only screen and (min-resolution:2dppx) {
 
 @media print {
     .govuk-notification-banner {
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-notification-banner {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print {
+    .govuk-notification-banner {
         font-size: 14pt;
         line-height: 1.15
     }
@@ -3806,14 +4147,21 @@ only screen and (min-resolution:2dppx) {
 }
 
 .govuk-notification-banner__title {
-    font-size: 1.1875rem;
-    line-height: 1.3157894737;
+    font-size: 1rem;
+    line-height: 1.25;
     font-weight: 700;
     margin: 0;
     padding: 0;
     color: #fff
 }
 
+@media (min-width:40.0625em) {
+    .govuk-notification-banner__title {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
 @media print {
     .govuk-notification-banner__title {
         font-size: 14pt;
@@ -3849,8 +4197,8 @@ only screen and (min-resolution:2dppx) {
 }
 
 .govuk-notification-banner__heading {
-    font-size: 1.3125rem;
-    line-height: 1.1904761905;
+    font-size: 1.125rem;
+    line-height: 1.1111111111;
     font-weight: 700;
     margin: 0 0 15px;
     padding: 0
@@ -3967,8 +4315,8 @@ only screen and (min-resolution:2dppx) {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1.1875rem;
-    line-height: 1.3157894737;
+    font-size: 1rem;
+    line-height: 1.25;
     box-sizing: border-box;
     position: relative;
     min-width: 45px;
@@ -3982,7 +4330,25 @@ only screen and (min-resolution:2dppx) {
     .govuk-pagination__item,
     .govuk-pagination__next,
     .govuk-pagination__prev {
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+
+    .govuk-pagination__item,
+    .govuk-pagination__next,
+    .govuk-pagination__prev {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print {
+
+    .govuk-pagination__item,
+    .govuk-pagination__next,
+    .govuk-pagination__prev {
         font-size: 14pt;
         line-height: 1.15
     }
@@ -4196,8 +4562,8 @@ only screen and (min-resolution:2dppx) {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1.6875rem;
-    line-height: 1.1111111111;
+    font-size: 1.5rem;
+    line-height: 1.0416666667;
     box-sizing: border-box;
     margin-bottom: 15px;
     padding: 35px;
@@ -4227,7 +4593,7 @@ only screen and (min-resolution:2dppx) {
 
 @media (max-width:40.0525em) {
     .govuk-panel {
-        padding: 15px;
+        padding: 10px;
         overflow-wrap: break-word;
         word-wrap: break-word
     }
@@ -4277,8 +4643,8 @@ only screen and (min-resolution:2dppx) {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1.1875rem;
-    line-height: 1.3157894737;
+    font-size: 1rem;
+    line-height: 1.25;
     display: inline-block;
     max-width: 160px;
     margin-top: -2px;
@@ -4292,7 +4658,19 @@ only screen and (min-resolution:2dppx) {
 
 @media print {
     .govuk-tag {
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-tag {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print {
+    .govuk-tag {
         font-size: 14pt;
         line-height: 1.15
     }
@@ -4365,8 +4743,8 @@ only screen and (min-resolution:2dppx) {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1rem;
-    line-height: 1.25;
+    font-size: .875rem;
+    line-height: 1.1428571429;
     color: #0b0c0c;
     display: table;
     margin: 0
@@ -4374,7 +4752,19 @@ only screen and (min-resolution:2dppx) {
 
 @media print {
     .govuk-phase-banner__content {
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-phase-banner__content {
+        font-size: 1rem;
+        line-height: 1.25
+    }
+}
+
+@media print {
+    .govuk-phase-banner__content {
         font-size: 14pt;
         line-height: 1.2;
         color: #000
@@ -4382,21 +4772,22 @@ only screen and (min-resolution:2dppx) {
 }
 
 .govuk-phase-banner__content__tag {
-    font-size: 1rem;
-    line-height: 1.25;
-    margin-right: 15px
+    font-size: .875rem;
+    line-height: 1.1428571429;
+    margin-right: 10px
 }
 
-@media print {
+@media (min-width:40.0625em) {
     .govuk-phase-banner__content__tag {
-        font-size: 14pt;
-        line-height: 1.2
+        font-size: 1rem;
+        line-height: 1.25
     }
 }
 
-@media (min-width:40.0625em) {
+@media print {
     .govuk-phase-banner__content__tag {
-        margin-right: 10px
+        font-size: 14pt;
+        line-height: 1.2
     }
 }
 
@@ -4523,8 +4914,8 @@ screen and (forced-colors:active) {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1.1875rem;
-    line-height: 1.3157894737;
+    font-size: 1rem;
+    line-height: 1.25;
     color: #0b0c0c;
     width: 40px;
     margin-bottom: 10px;
@@ -4533,7 +4924,19 @@ screen and (forced-colors:active) {
 
 @media print {
     .govuk-radios__divider {
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-radios__divider {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print {
+    .govuk-radios__divider {
         font-size: 14pt;
         line-height: 1.15;
         color: #000
@@ -4630,7 +5033,7 @@ screen and (forced-colors:active) {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1.1875rem;
+    font-size: 1rem;
     line-height: 1.25;
     box-sizing: border-box;
     min-width: 11.5em;
@@ -4644,7 +5047,19 @@ screen and (forced-colors:active) {
 
 @media print {
     .govuk-select {
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-select {
+        font-size: 1.1875rem;
+        line-height: 1.25
+    }
+}
+
+@media print {
+    .govuk-select {
         font-size: 14pt;
         line-height: 1.25
     }
@@ -4696,8 +5111,8 @@ screen and (forced-colors:active) {
     text-decoration: underline;
     text-decoration-thickness: max(1px, .0625rem);
     text-underline-offset: .1578em;
-    font-size: 1rem;
-    line-height: 1.25;
+    font-size: .875rem;
+    line-height: 1.1428571429;
     display: block;
     padding: 10px 15px
 }
@@ -4752,7 +5167,16 @@ screen and (forced-colors:active) {
     .govuk-skip-link:focus {
         color: #000
     }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-skip-link {
+        font-size: 1rem;
+        line-height: 1.25
+    }
+}
 
+@media print {
     .govuk-skip-link {
         font-size: 14pt;
         line-height: 1.2
@@ -4781,15 +5205,27 @@ screen and (forced-colors:active) {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1.1875rem;
-    line-height: 1.3157894737;
+    font-size: 1rem;
+    line-height: 1.25;
     color: #0b0c0c;
     margin: 0 0 20px
 }
 
 @media print {
     .govuk-summary-list {
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-summary-list {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print {
+    .govuk-summary-list {
         font-size: 14pt;
         line-height: 1.15;
         color: #000
@@ -4996,15 +5432,27 @@ screen and (forced-colors:active) {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 700;
-    font-size: 1.1875rem;
-    line-height: 1.3157894737;
+    font-size: 1rem;
+    line-height: 1.25;
     color: #0b0c0c;
     margin: 5px 20px 10px 0
 }
 
 @media print {
     .govuk-summary-card__title {
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-summary-card__title {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print {
+    .govuk-summary-card__title {
         font-size: 14pt;
         line-height: 1.15;
         color: #000
@@ -5018,8 +5466,8 @@ screen and (forced-colors:active) {
 }
 
 .govuk-summary-card__actions {
-    font-size: 1.1875rem;
-    line-height: 1.3157894737;
+    font-size: 1rem;
+    line-height: 1.25;
     font-weight: 700;
     display: flex;
     flex-wrap: wrap;
@@ -5029,6 +5477,13 @@ screen and (forced-colors:active) {
     list-style: none
 }
 
+@media (min-width:40.0625em) {
+    .govuk-summary-card__actions {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
 @media print {
     .govuk-summary-card__actions {
         font-size: 14pt;
@@ -5106,8 +5561,8 @@ screen and (-ms-high-contrast:active) {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1.1875rem;
-    line-height: 1.3157894737;
+    font-size: 1rem;
+    line-height: 1.25;
     color: #0b0c0c;
     width: 100%;
     margin-bottom: 20px;
@@ -5117,42 +5572,28 @@ screen and (-ms-high-contrast:active) {
 
 @media print {
     .govuk-table {
-        font-family: sans-serif;
-        font-size: 14pt;
-        line-height: 1.15;
-        color: #000
+        font-family: sans-serif
     }
 }
 
 @media (min-width:40.0625em) {
     .govuk-table {
-        margin-bottom: 30px
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
     }
 }
 
-.govuk-table--small-text-until-tablet {
-    font-size: 1rem;
-    line-height: 1.25
-}
-
 @media print {
-    .govuk-table--small-text-until-tablet {
+    .govuk-table {
         font-size: 14pt;
-        line-height: 1.2
+        line-height: 1.15;
+        color: #000
     }
 }
 
 @media (min-width:40.0625em) {
-    .govuk-table--small-text-until-tablet {
-        font-size: 1.1875rem;
-        line-height: 1.3157894737
-    }
-}
-
-@media print and (min-width:40.0625em) {
-    .govuk-table--small-text-until-tablet {
-        font-size: 14pt;
-        line-height: 1.15
+    .govuk-table {
+        margin-bottom: 30px
     }
 }
 
@@ -5214,8 +5655,8 @@ screen and (-ms-high-contrast:active) {
 }
 
 .govuk-table__caption--l {
-    font-size: 1.6875rem;
-    line-height: 1.1111111111
+    font-size: 1.5rem;
+    line-height: 1.0416666667
 }
 
 @media (min-width:40.0625em) {
@@ -5233,8 +5674,8 @@ screen and (-ms-high-contrast:active) {
 }
 
 .govuk-table__caption--m {
-    font-size: 1.3125rem;
-    line-height: 1.1904761905
+    font-size: 1.125rem;
+    line-height: 1.1111111111
 }
 
 @media (min-width:40.0625em) {
@@ -5258,8 +5699,8 @@ screen and (-ms-high-contrast:active) {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1.1875rem;
-    line-height: 1.3157894737
+    font-size: 1rem;
+    line-height: 1.25
 }
 
 @media (min-width:40.0625em) {
@@ -5270,20 +5711,39 @@ screen and (-ms-high-contrast:active) {
 
 @media print {
     .govuk-tabs {
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-tabs {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print {
+    .govuk-tabs {
         font-size: 14pt;
         line-height: 1.15
     }
 }
 
 .govuk-tabs__title {
-    font-size: 1.1875rem;
-    line-height: 1.3157894737;
+    font-size: 1rem;
+    line-height: 1.25;
     font-weight: 400;
     color: #0b0c0c;
     margin-bottom: 10px
 }
 
+@media (min-width:40.0625em) {
+    .govuk-tabs__title {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
 @media print {
     .govuk-tabs__title {
         font-size: 14pt;
@@ -5493,8 +5953,8 @@ screen and (-ms-high-contrast:active) {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1.1875rem;
-    line-height: 1.3157894737;
+    font-size: 1rem;
+    line-height: 1.25;
     margin-top: 0;
     margin-bottom: 20px;
     padding: 0;
@@ -5503,7 +5963,19 @@ screen and (-ms-high-contrast:active) {
 
 @media print {
     .govuk-task-list {
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-task-list {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print {
+    .govuk-task-list {
         font-size: 14pt;
         line-height: 1.15
     }
@@ -5583,8 +6055,8 @@ screen and (-ms-high-contrast:active) {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 400;
-    font-size: 1.1875rem;
-    line-height: 1.3157894737;
+    font-size: 1rem;
+    line-height: 1.25;
     margin-bottom: 20px;
     position: relative;
     padding: 10px 0
@@ -5592,7 +6064,19 @@ screen and (-ms-high-contrast:active) {
 
 @media print {
     .govuk-warning-text {
-        font-family: sans-serif;
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-warning-text {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print {
+    .govuk-warning-text {
         font-size: 14pt;
         line-height: 1.15
     }
@@ -6944,8 +7428,8 @@ screen and (-ms-high-contrast:active) {
 }
 
 .govuk-\!-font-size-36 {
-    font-size: 1.6875rem !important;
-    line-height: 1.1111111111 !important
+    font-size: 1.5rem !important;
+    line-height: 1.0416666667 !important
 }
 
 @media (min-width:40.0625em) {
@@ -6963,8 +7447,8 @@ screen and (-ms-high-contrast:active) {
 }
 
 .govuk-\!-font-size-27 {
-    font-size: 1.3125rem !important;
-    line-height: 1.1904761905 !important
+    font-size: 1.125rem !important;
+    line-height: 1.1111111111 !important
 }
 
 @media (min-width:40.0625em) {
@@ -6982,8 +7466,8 @@ screen and (-ms-high-contrast:active) {
 }
 
 .govuk-\!-font-size-24 {
-    font-size: 1.3125rem !important;
-    line-height: 1.1904761905 !important
+    font-size: 1.125rem !important;
+    line-height: 1.1111111111 !important
 }
 
 @media (min-width:40.0625em) {
@@ -7001,8 +7485,15 @@ screen and (-ms-high-contrast:active) {
 }
 
 .govuk-\!-font-size-19 {
-    font-size: 1.1875rem !important;
-    line-height: 1.3157894737 !important
+    font-size: 1rem !important;
+    line-height: 1.25 !important
+}
+
+@media (min-width:40.0625em) {
+    .govuk-\!-font-size-19 {
+        font-size: 1.1875rem !important;
+        line-height: 1.3157894737 !important
+    }
 }
 
 @media print {
@@ -7013,8 +7504,15 @@ screen and (-ms-high-contrast:active) {
 }
 
 .govuk-\!-font-size-16 {
-    font-size: 1rem !important;
-    line-height: 1.25 !important
+    font-size: .875rem !important;
+    line-height: 1.1428571429 !important
+}
+
+@media (min-width:40.0625em) {
+    .govuk-\!-font-size-16 {
+        font-size: 1rem !important;
+        line-height: 1.25 !important
+    }
 }
 
 @media print {
@@ -7025,8 +7523,15 @@ screen and (-ms-high-contrast:active) {
 }
 
 .govuk-\!-font-size-14 {
-    font-size: .875rem !important;
-    line-height: 1.4285714286 !important
+    font-size: .75rem !important;
+    line-height: 1.25 !important
+}
+
+@media (min-width:40.0625em) {
+    .govuk-\!-font-size-14 {
+        font-size: .875rem !important;
+        line-height: 1.4285714286 !important
+    }
 }
 
 @media print {

Action run for 490628a

@github-actions GitHub Actions
Copy link

github-actions bot commented Jan 30, 2024 •
edited
Loading

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/footer/_index.scss b/packages/govuk-frontend/dist/govuk/components/footer/_index.scss
index bcadc5dc2..a014f75f4 100644
--- a/packages/govuk-frontend/dist/govuk/components/footer/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/footer/_index.scss
@@ -11,7 +11,7 @@
   $govuk-footer-crest-image-height: ($govuk-footer-crest-image-height-2x / 2);
 
   .govuk-footer {
-    @include govuk-font($size: 19);
+    @include govuk-font($size: if($govuk-new-typography-scale, 19, 16));
     @include govuk-responsive-padding(7, "top");
     @include govuk-responsive-padding(5, "bottom");
 
diff --git a/packages/govuk-frontend/dist/govuk/components/panel/_index.scss b/packages/govuk-frontend/dist/govuk/components/panel/_index.scss
index b6552cd53..71f6c525b 100644
--- a/packages/govuk-frontend/dist/govuk/components/panel/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/panel/_index.scss
@@ -12,7 +12,7 @@
     text-align: center;
 
     @include govuk-media-query($until: tablet) {
-      padding: govuk-spacing(4) - $govuk-border-width;
+      padding: govuk-spacing(if($govuk-new-typography-scale, 4, 3)) - $govuk-border-width;
 
       // This is an if-all-else-fails attempt to stop long words from overflowing the container
       // on very narrow viewports by forcing them to break and wrap instead. This
diff --git a/packages/govuk-frontend/dist/govuk/components/phase-banner/_index.scss b/packages/govuk-frontend/dist/govuk/components/phase-banner/_index.scss
index 68f9fba7c..ca98c3a6c 100644
--- a/packages/govuk-frontend/dist/govuk/components/phase-banner/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/phase-banner/_index.scss
@@ -18,10 +18,12 @@
 
   .govuk-phase-banner__content__tag {
     @include govuk-font-size($size: 16);
-    margin-right: govuk-spacing(3);
+    margin-right: govuk-spacing(if($govuk-new-typography-scale, 3, 2));
 
-    @include govuk-media-query($from: tablet) {
-      margin-right: govuk-spacing(2);
+    @if $govuk-new-typography-scale {
+      @include govuk-media-query($from: tablet) {
+        margin-right: govuk-spacing(2);
+      }
     }
 
     // When forced colour mode is active, for example to provide high contrast,
diff --git a/packages/govuk-frontend/dist/govuk/components/table/_index.scss b/packages/govuk-frontend/dist/govuk/components/table/_index.scss
index 5bb7bca5c..bbdf39258 100644
--- a/packages/govuk-frontend/dist/govuk/components/table/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/table/_index.scss
@@ -9,13 +9,15 @@
     border-collapse: collapse;
   }
 
-  // Modifier for tables with a lot of data. Tables with lots of data benefit
-  // from a smaller font size on small screens.
-  .govuk-table--small-text-until-tablet {
-    @include govuk-font-size($size: 16);
+  @if $govuk-new-typography-scale {
+    // Modifier for tables with a lot of data. Tables with lots of data benefit
+    // from a smaller font size on small screens.
+    .govuk-table--small-text-until-tablet {
+      @include govuk-font-size($size: 16);
 
-    @include govuk-media-query($from: tablet) {
-      @include govuk-font-size($size: 19);
+      @include govuk-media-query($from: tablet) {
+        @include govuk-font-size($size: 19);
+      }
     }
   }
 
diff --git a/packages/govuk-frontend/dist/govuk/settings/_typography-responsive.scss b/packages/govuk-frontend/dist/govuk/settings/_typography-responsive.scss
index e2e61d55e..cb074b58c 100644
--- a/packages/govuk-frontend/dist/govuk/settings/_typography-responsive.scss
+++ b/packages/govuk-frontend/dist/govuk/settings/_typography-responsive.scss
@@ -16,20 +16,146 @@
 
 $govuk-root-font-size: 16px !default;
 
-/// Responsive typography font map
+/// Feature flag for new typography scale
 ///
-/// This is used to generate responsive typography that adapts according to the
-/// breakpoints.
+/// When set to true, $govuk-typography-scale will use the new font map instead
+/// of the current/old one as well as apply changes in components to account
+/// for the updated scale.
 ///
-/// Font size and font weight can be defined for each breakpoint. You can define
-/// different behaviour on tablet and desktop. The 'null' breakpoint is for
-/// mobile.
+/// Should be removed in 6.0.
 ///
-/// Line-heights will automatically be converted from pixel measurements into
-/// relative values. For example, with a font-size of 16px and a line-height of
-/// 24px, the line-height will be converted to 1.5 before output.
+/// @type Boolean
+/// @access public
+
+$govuk-new-typography-scale: false !default;
+
+/// The font map for the old typography scale
 ///
-/// You can also specify a separate font size and line height for print media.
+/// @type Map
+///
+/// @prop {Number} $point.$breakpoint.font-size - Font size for `$point` at `$breakpoint`
+/// @prop {Number} $point.$breakpoint.line-height - Line height for `$point` at `$breakpoint`
+/// @prop {Number} $point.print.font-size - Font size for `$point` when printing
+/// @prop {Number} $point.print.line-height - Line height for `$point` when printing
+///
+/// @access private
+
+$_govuk-typography-scale-legacy: (
+  80: (
+    null: (
+      font-size: 53px,
+      line-height: 55px
+    ),
+    tablet: (
+      font-size: 80px,
+      line-height: 80px
+    ),
+    print: (
+      font-size: 53pt,
+      line-height: 1.1
+    )
+  ),
+  48: (
+    null: (
+      font-size: 32px,
+      line-height: 35px
+    ),
+    tablet: (
+      font-size: 48px,
+      line-height: 50px
+    ),
+    print: (
+      font-size: 32pt,
+      line-height: 1.15
+    )
+  ),
+  36: (
+    null: (
+      font-size: 24px,
+      line-height: 25px
+    ),
+    tablet: (
+      font-size: 36px,
+      line-height: 40px
+    ),
+    print: (
+      font-size: 24pt,
+      line-height: 1.05
+    )
+  ),
+  27: (
+    null: (
+      font-size: 18px,
+      line-height: 20px
+    ),
+    tablet: (
+      font-size: 27px,
+      line-height: 30px
+    ),
+    print: (
+      font-size: 18pt,
+      line-height: 1.15
+    )
+  ),
+  24: (
+    null: (
+      font-size: 18px,
+      line-height: 20px
+    ),
+    tablet: (
+      font-size: 24px,
+      line-height: 30px
+    ),
+    print: (
+      font-size: 18pt,
+      line-height: 1.15
+    )
+  ),
+  19: (
+    null: (
+      font-size: 16px,
+      line-height: 20px
+    ),
+    tablet: (
+      font-size: 19px,
+      line-height: 25px
+    ),
+    print: (
+      font-size: 14pt,
+      line-height: 1.15
+    )
+  ),
+  16: (
+    null: (
+      font-size: 14px,
+      line-height: 16px
+    ),
+    tablet: (
+      font-size: 16px,
+      line-height: 20px
+    ),
+    print: (
+      font-size: 14pt,
+      line-height: 1.2
+    )
+  ),
+  14: (
+    null: (
+      font-size: 12px,
+      line-height: 15px
+    ),
+    tablet: (
+      font-size: 14px,
+      line-height: 20px
+    ),
+    print: (
+      font-size: 12pt,
+      line-height: 1.2
+    )
+  )
+);
+
+/// The font map for the new typography scale
 ///
 /// @type Map
 ///
@@ -38,9 +164,9 @@ $govuk-root-font-size: 16px !default;
 /// @prop {Number} $point.print.font-size - Font size for `$point` when printing
 /// @prop {Number} $point.print.line-height - Line height for `$point` when printing
 ///
-/// @access public
+/// @access private
 
-$govuk-typography-scale: (
+$_govuk-typography-scale-modern: (
   80: (
     null: (
       font-size: 53px,
@@ -151,6 +277,36 @@ $govuk-typography-scale: (
       line-height: 1.2
     )
   )
+);
+
+/// Responsive typography font map
+///
+/// This is used to generate responsive typography that adapts according to the
+/// breakpoints.
+///
+/// Font size and font weight can be defined for each breakpoint. You can define
+/// different behaviour on tablet and desktop. The 'null' breakpoint is for
+/// mobile.
+///
+/// Line-heights will automatically be converted from pixel measurements into
+/// relative values. For example, with a font-size of 16px and a line-height of
+/// 24px, the line-height will be converted to 1.5 before output.
+///
+/// You can also specify a separate font size and line height for print media.
+///
+/// @type Map
+///
+/// @prop {Number} $point.$breakpoint.font-size - Font size for `$point` at `$breakpoint`
+/// @prop {Number} $point.$breakpoint.line-height - Line height for `$point` at `$breakpoint`
+/// @prop {Number} $point.print.font-size - Font size for `$point` when printing
+/// @prop {Number} $point.print.line-height - Line height for `$point` when printing
+///
+/// @access public
+
+$govuk-typography-scale: if(
+  $govuk-new-typography-scale,
+  $_govuk-typography-scale-modern,
+  $_govuk-typography-scale-legacy
 ) !default;
 
 /*# sourceMappingURL=_typography-responsive.scss.map */

Action run for 490628a

36degrees
36degrees reviewed Jan 30, 2024
View reviewed changes
Copy link
Contributor

@36degrees 36degrees left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Something doesn't seem quite right here – the flag defaults to false, so why are we seeing so many changes to font sizes and line-heights in the built CSS in the package? 🤔

@36degrees
Copy link
Contributor

I should have thought for an extra thirty seconds before posting that – this PR is targeting the type-scale branch so the changes we're seeing are effectively reverting the built package back to what's on main? Is that correct?

I think it might be worth doing a manual diff against what's in main just to check everything is as we expect.

@colinrotherham
Copy link
Contributor

@36degrees Yeah pretty much!

The diff from main → type-scale in #2421 (comment) over in PR #2421
The diff from type-scale → new-typography-scale-feature-flag in #4701 (comment) above

It's this command that uses $GITHUB_BASE_REF for the target:

govuk-frontend/.github/workflows/diff-change-to-package.yaml

Line 37 in 2337e95

bin/package-diff.sh $GITHUB_BASE_REF $GITHUB_WORKSPACE

@owenatgov
Copy link
Contributor Author

owenatgov commented Jan 30, 2024 •
edited
Loading

@36degrees @colinrotherham So, if I diff this branch (new-typography-scale-feature-flag) against main it's looking good. CSS and JS diffs are empty. For HTML this is all we've got:

diff --git a/packages/govuk-frontend/dist/govuk/components/table/template-with-small-text-modifier-for-tables-with-a-lot-of-data.html b/packages/govuk-frontend/dist/govuk/components/table/template-with-small-text-modifier-for-tables-with-a-lot-of-data.html
new file mode 100644
index 000000000..377abdff6
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/table/template-with-small-text-modifier-for-tables-with-a-lot-of-data.html
@@ -0,0 +1,19 @@
+<table class="govuk-table govuk-table--small-text-until-tablet">
+  <tbody class="govuk-table__body">
+        <tr class="govuk-table__row">
+          <td class="govuk-table__cell">January</td>
+          <td class="govuk-table__cell govuk-table__cell--numeric">£85</td>
+          <td class="govuk-table__cell govuk-table__cell--numeric">£95</td>
+        </tr>
+        <tr class="govuk-table__row">
+          <td class="govuk-table__cell">February</td>
+          <td class="govuk-table__cell govuk-table__cell--numeric">£75</td>
+          <td class="govuk-table__cell govuk-table__cell--numeric">£55</td>
+        </tr>
+        <tr class="govuk-table__row">
+          <td class="govuk-table__cell">March</td>
+          <td class="govuk-table__cell govuk-table__cell--numeric">£165</td>
+          <td class="govuk-table__cell govuk-table__cell--numeric">£125</td>
+        </tr>
+  </tbody>
+</table>

That's there because of the new example I added to demo the table class modifier.

The "other" diff is identical to the comment above. I feel confident about this.

@owenatgov owenatgov force-pushed the new-typography-scale-feature-flag branch from da07224 to 490628a Compare January 30, 2024 18:07
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4701 January 30, 2024 18:07 Inactive
colinrotherham
colinrotherham reviewed Feb 2, 2024
View reviewed changes
packages/govuk-frontend/src/govuk/components/table/_index.scss
// from a smaller font size on small screens.
.govuk-table--small-text-until-tablet {
@include govuk-font-size($size: 16);
@if $govuk-new-typography-scale {
Copy link
Contributor

@colinrotherham colinrotherham Feb 2, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The guidance PR introduces the --small-text-until-tablet modifier

But we haven't explained that it's opt-in only via the $govuk-new-typography-scale flag, should we?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm aware that we don't clarify this and we should. I've got a plan to hold off on looking into this because we're planning on looking at how to do this more broadly via the typography section restructure work. Whatever we decide there I'll just copy for that guidance PR.

@owenatgov owenatgov merged commit c0696f8 into type-scale Feb 5, 2024
45 checks passed
@owenatgov owenatgov deleted the new-typography-scale-feature-flag branch February 5, 2024 17:46
@owenatgov owenatgov mentioned this pull request Feb 8, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@36degrees 36degrees 36degrees left review comments

@colinrotherham colinrotherham colinrotherham approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Apply typography feature flag to the type scale branch
4 participants
@owenatgov @36degrees @colinrotherham @govuk-design-system-ci