From d48169478b7227eabae3f0599a8e32883986159f Mon Sep 17 00:00:00 2001
From: Emily Hazlehurst <emily.hazlehurst@digital.justice.gov.uk>
Date: Wed, 20 Nov 2024 14:57:31 +0000
Subject: [PATCH] CDPT-636: Update heading styles in the rich text component -
 Add new rems font sizes in the rich text component and for page headings -
 Clarify the 62.5% decision in reset.styl

---
 .../components/c-rich-text-block/style.styl   | 25 ++-----
 .../clarity/src/globals/css/_mixins.styl      | 69 +++++++++++++++++++
 .../clarity/src/globals/css/objects.styl      |  4 +-
 .../themes/clarity/src/globals/css/reset.styl |  5 ++
 4 files changed, 81 insertions(+), 22 deletions(-)

diff --git a/public/app/themes/clarity/src/components/c-rich-text-block/style.styl b/public/app/themes/clarity/src/components/c-rich-text-block/style.styl
index 7be2c637d..cc78bf01a 100644
--- a/public/app/themes/clarity/src/components/c-rich-text-block/style.styl
+++ b/public/app/themes/clarity/src/components/c-rich-text-block/style.styl
@@ -150,39 +150,24 @@ img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
     border: 1px solid $border;
   }
 
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    ff-title();
-    margin-bottom: $spacing;
-    font-weight: 700;
-  }
-
   h1 {
-      ff-title()
-      font-size: $crust;
+    h1();
   }
 
   h2 {
-    font-size: $mantle;
-    margin-top: 50px;
+    h2();
   }
 
   h3 {
-    font-size: 24px;
-    line-height: 30px;
+    h3();
   }
 
   h4 {
-    font-size: 19px;
-    line-height: 25px;
+    h4();
   }
 
   h5 {
-    font-size: 16px;
-    line-height: 20px;
+    h5();
   }
 
   h6 {
diff --git a/public/app/themes/clarity/src/globals/css/_mixins.styl b/public/app/themes/clarity/src/globals/css/_mixins.styl
index 2fe592141..1613d3a5c 100644
--- a/public/app/themes/clarity/src/globals/css/_mixins.styl
+++ b/public/app/themes/clarity/src/globals/css/_mixins.styl
@@ -17,6 +17,75 @@ ff-body() {
   margin-bottom: $bodyCopy;
 }
 
+// Heading styles for c-rich-text component and the o-page--title object, adapted from https://design-system.service.gov.uk/styles/type-scale/
+h1() {
+  ff-title();
+  font-size: 3.2rem;
+  line-height: 1.1875;
+  margin-bottom: 2.5rem;
+  @media screen and (min-width: 640px) {
+    font-size: 4.8rem;
+    line-height: 1.125;
+    margin-bottom: 3.125rem;
+  }
+}
+
+h2() {
+  ff-title();
+  font-size: 2.7rem;
+  line-height: 1.22222;
+  margin-top: 3rem;
+  margin-bottom: 1.25rem;
+  @media screen and (min-width: 640px) {
+    font-size: 3.6rem;
+    line-height: 1.16667;
+    margin-bottom: 1.875rem;
+  }
+}
+
+h3() {
+  ff-title();
+  font-size: 2.2rem;
+  line-height: 1.31818;
+  margin-top: 3rem;
+  margin-bottom: 1rem;
+  @media screen and (min-width: 640px) {
+    font-size: 2.6rem;
+    line-height: 1.25;
+    margin-bottom: 1.25rem;
+  }
+}
+
+h4() {
+  ff-title();
+  font-size: 1.9rem;
+  line-height: 1.42105;
+  margin-top: 3rem;
+  margin-bottom: 1rem;
+  @media screen and (min-width: 640px) {
+    font-size: 2.2rem;
+    line-height: 1.36364;
+    margin-bottom: 1.25rem;
+  }
+}
+
+h5() {
+  ff-title();
+  font-size: 1.6rem;
+  line-height: 1.5;
+  margin-top: 3rem;
+  margin-bottom: 1rem;
+  @media screen and (min-width: 640px) {
+    font-size: 1.9rem;
+    line-height: 1.47368;
+    margin-bottom: 1.25rem;
+  }
+}
+
+body() {
+  ff-body();
+}
+
 // For a real content list with bullet points
 real-list() {
   ff-body();
diff --git a/public/app/themes/clarity/src/globals/css/objects.styl b/public/app/themes/clarity/src/globals/css/objects.styl
index acd020539..d787aaa11 100644
--- a/public/app/themes/clarity/src/globals/css/objects.styl
+++ b/public/app/themes/clarity/src/globals/css/objects.styl
@@ -8,7 +8,7 @@
   margin-bottom: $spacing*2;
   // Main page title
   &--page {
-  	font-size: $crust;
+  	h1();
   	margin-top: $spacing*2;
   }
   // Section title
@@ -22,7 +22,7 @@
   }
 
   &--headline {
-    font-size: $crust;
+    h1();
   }
 
   &--byline {
diff --git a/public/app/themes/clarity/src/globals/css/reset.styl b/public/app/themes/clarity/src/globals/css/reset.styl
index 4cba2e024..690dc9a05 100644
--- a/public/app/themes/clarity/src/globals/css/reset.styl
+++ b/public/app/themes/clarity/src/globals/css/reset.styl
@@ -89,6 +89,11 @@ select::-ms-expand {
   display: none;
   } // Remove default drop down style in IE
 html {
+  /* This is an old trick to make rems map to pixel values.
+   * The browser default is 16px, 62.5% sets it to 10px so 1.6 rem is equivalent to 16px.
+   * See this article for a better explanation: https://www.aleksandrhovhannisyan.com/blog/62-5-percent-font-size-trick/
+   * TODO: remove this in future as it's confusing and doesn't integrate well
+   */
   // Reset font size to 10px
   font-size: 62.5%;
 }