From 66ea563fece0133c71a62b23af27fd22f8a8fe98 Mon Sep 17 00:00:00 2001
From: Steve Stein <steven_ts@hotmail.com>
Date: Wed, 14 Sep 2022 06:58:43 -0600
Subject: [PATCH] Use the correct type scale for heading levels in rich text.
Fix #9027 (#9189)
Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>
---
CHANGELOG.txt | 1 +
client/scss/elements/_typography.scss | 4 ----
client/src/components/Draftail/Draftail.scss | 23 ++++++++++----------
docs/releases/4.0.2.md | 1 +
4 files changed, 13 insertions(+), 16 deletions(-)
diff --git a/CHANGELOG.txt b/CHANGELOG.txt
index f32875ab5c..eeac1952b1 100644
--- a/CHANGELOG.txt
+++ b/CHANGELOG.txt
@@ -40,6 +40,7 @@ Changelog
* Fix: Reinstate specific labels for chooser buttons (for example 'Choose another page', 'Edit this page' not 'Change', 'Edit') so that it is clearer for users and non-English translations (Matt Westcott)
* Fix: Resolve issue where searches with a tag and a query param in the image listing would result in an `FilterFieldError` (Stefan Hammer)
* Fix: Add missing vertical space between header and content in embed chooser modal (LB (Ben) Johnston)
+ * Fix: Use the correct type scale for heading levels in rich text (Steven Steinwand)
4.0.1 (05.09.2022)
diff --git a/client/scss/elements/_typography.scss b/client/scss/elements/_typography.scss
index 62d7de5f64..cc870afc2f 100644
--- a/client/scss/elements/_typography.scss
+++ b/client/scss/elements/_typography.scss
@@ -20,10 +20,6 @@ h6 {
h1 {
font-size: 1.5em;
font-weight: 700;
-
- span {
- font-weight: 300;
- }
}
h2 {
diff --git a/client/src/components/Draftail/Draftail.scss b/client/src/components/Draftail/Draftail.scss
index 6632086aec..e66870ec4a 100644
--- a/client/src/components/Draftail/Draftail.scss
+++ b/client/src/components/Draftail/Draftail.scss
@@ -46,33 +46,32 @@ $draftail-editor-font-family: $font-sans;
h6 {
// Overrides for heading styles of Wagtail itself.
color: inherit;
- line-height: 1;
- }
-
- h1,
- h2,
- h3 {
- line-height: 1.1;
+ line-height: theme('lineHeight.tight');
+ font-weight: theme('fontWeight.bold');
}
h1 {
- font-size: 2em;
+ font-size: theme('fontSize.30');
}
h2 {
- font-size: 1.8em;
+ font-size: theme('fontSize.24');
}
h3 {
- font-size: 1.5em;
+ font-size: theme('fontSize.22');
}
h4 {
- font-size: 1.2em;
+ font-size: theme('fontSize.18');
}
h5 {
- font-size: 1.1em;
+ font-size: theme('fontSize.16');
+ }
+
+ h6 {
+ font-size: theme('fontSize.14');
}
}
diff --git a/docs/releases/4.0.2.md b/docs/releases/4.0.2.md
index 6dae3e8a46..703dc067cc 100644
--- a/docs/releases/4.0.2.md
+++ b/docs/releases/4.0.2.md
@@ -24,3 +24,4 @@ depth: 1
* Reinstate specific labels for chooser buttons (for example 'Choose another page', 'Edit this page' not 'Change', 'Edit') so that it is clearer for users and non-English translations (Matt Westcott)
* Resolve issue where searches with a tag and a query param in the image listing would result in an `FilterFieldError` (Stefan Hammer)
* Add missing vertical space between header and content in embed chooser modal (LB (Ben) Johnston)
+ * Use the correct type scale for heading levels in rich text (Steven Steinwand)