From eec1e630eb00f4f5f1ccebc0efba06ba43d96337 Mon Sep 17 00:00:00 2001
From: Ben Haynes <ben@directus.io>
Date: Wed, 1 Sep 2021 16:16:51 -0400
Subject: [PATCH] Update WYSIWYG styling

---
 .../input-rich-text-html/get-editor-styles.ts | 127 +++++++++---------
 1 file changed, 66 insertions(+), 61 deletions(-)

diff --git a/app/src/interfaces/input-rich-text-html/get-editor-styles.ts b/app/src/interfaces/input-rich-text-html/get-editor-styles.ts
index 93ec41fe25..f694335a4d 100644
--- a/app/src/interfaces/input-rich-text-html/get-editor-styles.ts
+++ b/app/src/interfaces/input-rich-text-html/get-editor-styles.ts
@@ -17,63 +17,62 @@ body.mce-content-readonly {
 	color: ${cssVar('--foreground-subdued')};
 	background-color: ${cssVar('--background-subdued')};
 }
-h1 {
+h1, h2, h3, h4, h5, h6 {
 	font-family: ${cssVar(`--family-${font}`)}, serif;
-	font-size: 44px;
-	line-height: 52px;
-	font-weight: 300;
+	color: ${cssVar('--foreground-normal-alt')};
+	font-weight: 700;
 	margin-bottom: 0;
 }
+h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
+	margin-top: 0.5em;
+}
+h1 {
+	font-size: 36px;
+	line-height: 46px;
+	margin-top: 1em;
+}
 h2 {
-	font-size: 34px;
-	line-height: 38px;
-	font-weight: 600;
-	margin-top: 60px;
-	margin-bottom: 0;
+	font-size: 24px;
+	line-height: 34px;
+	margin-top: 1.25em;
 }
 h3 {
-	font-size: 26px;
-	line-height: 31px;
-	font-weight: 600;
-	margin-top: 40px;
-	margin-bottom: 0;
+	font-size: 19px;
+	line-height: 29px;
+	margin-top: 1.25em;
 }
 h4 {
-	font-size: 22px;
-	line-height: 28px;
-	font-weight: 600;
-	margin-top: 40px;
-	margin-bottom: 0;
+	font-size: 16px;
+	line-height: 26px;
+	margin-top: 1.5em;
 }
 h5 {
-	font-size: 18px;
-	line-height: 26px;
-	font-weight: 600;
-	margin-top: 40px;
-	margin-bottom: 0;
+	font-size: 14px;
+	line-height: 24px;
+	margin-top: 2em;
 }
 h6 {
-	font-size: 16px;
-	line-height: 24px;
-	font-weight: 600;
-	margin-top: 40px;
-	margin-bottom: 0;
+	font-size: 12px;
+	line-height: 22px;
+	margin-top: 2em;
 }
 p {
 	font-family: ${cssVar(`--family-${font}`)}, serif;
-	font-size: 16px;
-	line-height: 32px;
-	margin-top: 20px;
-	margin-bottom: 20px;
+	font-size: 15px;
+	line-height: 24px;
+	font-weight: 500;
+	margin: 1.5em 0;
 }
 a {
-	color: #546e7a;
+	color: ${cssVar('--primary-125')};
+	text-decoration: none;
 }
 ul, ol {
 	font-family: ${cssVar(`--family-${font}`)}, serif;
-	font-size: 18px;
-	line-height: 34px;
-	margin: 24px 0;
+	font-size: 15px;
+	line-height: 24px;
+	font-weight: 500;
+	margin: 1.5em 0;
 }
 ul ul,
 	ol ol,
@@ -82,54 +81,60 @@ ul ul,
 	margin: 0;
 }
 b, strong {
-	font-weight: 600;
+	font-weight: 700;
 }
 code {
-	font-size: 18px;
-	line-height: 34px;
+	font-size: 15px;
+	line-height: 24px;
+	font-weight: 500;
 	padding: 2px 4px;
 	font-family: ${cssVar('--family-monospace')}, monospace;
-	background-color: #eceff1;
-	border-radius: 4px;
+	background-color: ${cssVar('--background-normal')};
+	border-radius: ${cssVar('--border-radius')};
 	overflow-wrap: break-word;
 }
 pre {
-	font-size: 18px;
+	font-size: 15px;
 	line-height: 24px;
-	padding: 20px;
+	font-weight: 500;
+	padding: 1em;
 	font-family: ${cssVar('--family-monospace')}, monospace;
-	background-color: #eceff1;
-	border-radius: 4px;
+	background-color: ${cssVar('--background-normal')};
+	border-radius: ${cssVar('--border-radius')};
 	overflow: auto;
 }
 blockquote {
 	font-family: ${cssVar(`--family-${font}`)}, serif;
-	font-size: 18px;
-	line-height: 34px;
-	border-left: 2px solid #546e7a;
-	padding-left: 10px;
-	margin-left: -10px;
-	font-style: italic;
+	font-size: 15px;
+	line-height: 24px;
+	font-weight: 500;
+	border-left: 2px solid ${cssVar('--border-normal')};
+	padding-left: 1em;
+	margin-left: 0px;
 }
 video,
-	iframe,
-	img {
+iframe,
+img {
 	max-width: 100%;
-	border-radius: 4px;
+	border-radius: ${cssVar('--border-radius')};
 	height: auto;
 }
 hr {
-	border: 1px solid ${cssVar('--border-normal')};
-	margin-top: 52px;
-	margin-bottom: 56px;
-	text-align: center;
+	background-color: ${cssVar('--border-normal')};
+	height: 1px;
+	border: none;
+	margin-top: 2em;
+	margin-bottom: 2em;
 }
 table {
 	border-collapse: collapse;
+	font-size: 15px;
+	line-height: 24px;
+	font-weight: 500;
 }
 table th,
-	table td {
-	border: 1px solid #cfd8dc;
+table td {
+	border: 1px solid ${cssVar('--border-normal')};
 	padding: 0.4rem;
 }
 figure {