Merge pull request #4701 from alphagov/new-typography-scale-feature-flag

Add new typography scale feature flag

packages/govuk-frontend-review/src/stylesheets/app.scss

@@ -1,4 +1,5 @@
 $govuk-show-breakpoints: true;
+$govuk-new-typography-scale: true;
 
 @import "govuk/all";
 @import "partials/app";

packages/govuk-frontend/src/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");
 

packages/govuk-frontend/src/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

packages/govuk-frontend/src/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,

packages/govuk-frontend/src/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);
+      }
     }
   }
 

packages/govuk-frontend/src/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,4 +277,34 @@ $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;