Add 36 to type scale and swap headings to use it

nhsuk · Jul 22, 2024 · 51288db · 51288db
1 parent 17a4c06
commit 51288db
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 6 deletions.
diff --git a/packages/components/fieldset/_fieldset.scss b/packages/components/fieldset/_fieldset.scss
@@ -40,7 +40,7 @@
 }
 
 .nhsuk-fieldset__legend--l {
-  @include nhsuk-font($size: 32, $weight: bold);
+  @include nhsuk-font($size: 36, $weight: bold);
   margin-bottom: nhsuk-spacing(3);
 }
 

diff --git a/packages/components/label/_label.scss b/packages/components/label/_label.scss
@@ -23,7 +23,7 @@
 }
 
 .nhsuk-label--l {
-  @include nhsuk-typography-responsive(32);
+  @include nhsuk-typography-responsive(36);
 }
 
 .nhsuk-label--m {

diff --git a/packages/core/settings/_typography.scss b/packages/core/settings/_typography.scss
@@ -57,6 +57,21 @@ $nhsuk-typography-scale: (
       line-height: 1.15
     )
   ),
+  36: (
+    null: (
+      font-size: 27px,
+      line-height: 32px
+    ),
+    tablet: (
+      font-size: 36px,
+      line-height: 40px
+    ),
+    print: (
+      font-size: 27pt,
+      line-height: 1.05
+    )
+  ),
+  // 32 is deprecated and will be removed in next major version
   32: (
     null: (
       font-size: 24px,

diff --git a/packages/core/styles/_typography.scss b/packages/core/styles/_typography.scss
@@ -28,7 +28,7 @@ h1,
 }
 
 %nhsuk-heading-l {
-  @include nhsuk-typography-responsive(32);
+  @include nhsuk-typography-responsive(36);
 
   display: block;
   font-weight: $nhsuk-font-bold;
@@ -105,7 +105,7 @@ h6,
 /* Captions to be used inside headings */
 
 .nhsuk-caption-xl {
-  @include nhsuk-font(32);
+  @include nhsuk-font(36);
 
   color: $nhsuk-secondary-text-color;
   display: block;

diff --git a/packages/core/tools/_typography.scss b/packages/core/tools/_typography.scss
@@ -106,7 +106,7 @@
 //   }
 //
 //  .foo {
-//    @include nhsuk-typography-responsive(32, $important: true);
+//    @include nhsuk-typography-responsive(36, $important: true);
 //   }
 //
 // @param {Map} $font-map - Font map
@@ -121,6 +121,7 @@
 //
 
 @mixin nhsuk-typography-responsive($size, $override-line-height: false, $important: false) {
+
   @if not map-has-key($nhsuk-typography-scale, $size) {
     @error "Unknown font size `#{$size}` - expected a point from the typography scale.";
   }
@@ -170,7 +171,7 @@
 //   }
 //
 //  .foo {
-//    @include nhsuk-font(32, $weight: bold);
+//    @include nhsuk-font(36, $weight: bold);
 //   }
 //
 // @param {Number} $size - Size of the font as it would appear on desktop -