From a1cc5ba1d2ac397d91f5f40f2e0f249e52667f07 Mon Sep 17 00:00:00 2001
From: Emily Hazlehurst <emily.hazlehurst@digital.justice.gov.uk>
Date: Fri, 13 Dec 2024 15:31:03 +0000
Subject: [PATCH] CDPT-636: Typescale - Update typescale to 1.125 ratio

---
 .../clarity/src/components/c-polls/style.styl | 10 +++--
 .../components/c-rich-text-block/style.styl   | 25 +++--------
 .../clarity/src/globals/css/_mixins.styl      | 42 +++++++++++++++++++
 .../clarity/src/globals/css/objects.styl      |  4 +-
 .../themes/clarity/src/globals/css/reset.styl |  5 +++
 5 files changed, 60 insertions(+), 26 deletions(-)

diff --git a/public/app/themes/clarity/src/components/c-polls/style.styl b/public/app/themes/clarity/src/components/c-polls/style.styl
index aaae0f320..4d2f1b620 100644
--- a/public/app/themes/clarity/src/components/c-polls/style.styl
+++ b/public/app/themes/clarity/src/components/c-polls/style.styl
@@ -7,6 +7,12 @@
 
 // Overriding Totalpoll plugin styles to Clarity theme styles.
 // Needs to be outside of this specific component's scope so it is global and will affect wherever the shortcode is used on the site.
+.totalpoll-wrapper {
+  h4 {
+    font-size: $mantle !important;
+  }
+}
+
 .totalpoll-button, .totalpoll-button-primary, .totalpoll-button-vote {
   cursor: pointer !important;
   font-size: $outerCore !important;
@@ -53,10 +59,6 @@
   display: none !important;
 }
 
-h4 {
-  font-size: $mantle !important;
-}
-
 .totalpoll-question-choices-item-votes-text {
   font-size: $outerCore !important;
 }
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..89c60e780 100644
--- a/public/app/themes/clarity/src/globals/css/_mixins.styl
+++ b/public/app/themes/clarity/src/globals/css/_mixins.styl
@@ -17,6 +17,48 @@ 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/
+// 1.125 scale ratio.
+// Use the same sizes for mobile and desktop as the ratio limits the number of available font sizes.
+h1() {
+  ff-title();
+  font-size: 3.6rem;
+  line-height: 4rem;
+}
+
+h2() {
+  ff-title();
+  font-size: 2.7rem;
+  line-height: 3rem;
+  margin-top: 5rem;
+  margin-bottom: $spacing;
+}
+
+h3() {
+  ff-title();
+  font-size: 2.4rem;
+  line-height: 3rem;
+  margin-bottom: $spacing;
+}
+
+h4() {
+  ff-title();
+  font-size: 2.1rem;
+  line-height: 2.5rem;
+  margin-bottom: $spacing;
+}
+
+h5() {
+  ff-title();
+  font-size: 1.9rem;
+  line-height: 2.5rem;
+  margin-bottom: $spacing;
+}
+
+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%;
 }