chore(richtext-*): improved rich text editor styles and interaction (#7817)

## Description

- Improves the standard typography styles of the rich text editors.
- Improve styles of Lexical relationship, inline-relationship, upload,
and blocks features.
- Improves drag and drop interaction for Lexical.
- Adds a dark mode style for Lexical inline toolbar, floating link editor,
and slash menu.

- [x] I have read and understand the
[CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md)
document in this repository.

## Type of change

<!-- Please delete options that are not relevant. -->

- [x] Chore (non-breaking change which does not add functionality)

## Checklist:

- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] Existing test suite passes locally with my changes
- [ ] I have made corresponding changes to the documentation

packages/richtext-slate/src/field/elements/link/Element/index.scss

@@ -2,7 +2,6 @@
 
 .rich-text-link {
   position: relative;
-  text-decoration: underline;
 
   .popup {
     position: absolute;
@@ -35,11 +34,6 @@
       font-weight: 600;
       cursor: pointer;
       margin: 0;
-
-      &:hover,
-      &:focus-visible {
-        text-decoration: underline;
-      }
     }
   }
 
@@ -78,7 +72,9 @@
   border: 0;
   background-color: transparent;
   padding: 0;
-  text-decoration: underline;
+  color: var(--theme-success-600);
+  text-decoration: none;
+  border-bottom: 1px dotted;
   cursor: text;
 
   &:focus,

packages/richtext-slate/src/field/index.scss

@@ -39,7 +39,14 @@
   &__editor {
     font-family: var(--font-serif);
     font-size: base(0.8);
-    letter-spacing: 0.02em;
+    line-height: 1.5;
+
+    *[data-slate-node='element'] {
+      margin-top: 0.75em;
+      position: relative;
+      line-height: 1.5;
+      letter-spacing: normal;
+    }
 
     h1,
     h2,
@@ -47,39 +54,49 @@
     h4,
     h5,
     h6 {
-      font-family: var(--font-body);
-      line-height: 1.125;
-      letter-spacing: 0;
+      font-weight: 700;
+      letter-spacing: normal;
     }
 
     h1[data-slate-node='element'] {
-      font-size: base(1.5);
-      margin: base(1) 0 base(0.5);
+      font-size: base(1.4);
+      margin-block: 0.5em 0.4em;
+      line-height: base(1.2);
+      letter-spacing: normal;
     }
 
     h2[data-slate-node='element'] {
       font-size: base(1.25);
-      margin: base(1) 0 base(0.5);
+      margin-block: 0.55em 0.4em;
+      line-height: base(1.2);
+      letter-spacing: normal;
     }
 
     h3[data-slate-node='element'] {
-      font-size: base(1.125);
-      margin: base(0.75) 0 base(0.5);
+      font-size: base(1.1);
+      margin-block: 0.6em 0.4em;
+      line-height: base(1.3);
+      letter-spacing: normal;
     }
 
     h4[data-slate-node='element'] {
       font-size: base(1);
-      margin: base(0.5) 0 base(0.5);
+      margin-block: 0.65em 0.4em;
+      line-height: base(1.4);
+      letter-spacing: normal;
     }
 
     h5[data-slate-node='element'] {
-      font-size: base(0.875);
-      margin: base(0.25) 0 base(0.25);
+      font-size: base(0.9);
+      margin-block: 0.7em 0.4em;
+      line-height: base(1.5);
+      letter-spacing: normal;
     }
 
     h6[data-slate-node='element'] {
-      font-size: base(0.75);
-      margin: base(0.25) 0 base(0.25);
+      font-size: base(0.8);
+      margin-block: 0.75em 0.4em;
+      line-height: base(1.5);
     }
   }
 

packages/richtext-slate/src/scss/app.scss

@@ -21,8 +21,8 @@
   --theme-baseline-body-size: #{$baseline-body-size};
   --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
     sans-serif;
-  --font-serif: Georgia, 'Bitstream Charter', 'Charis SIL', Utopia, 'URW Bookman L', serif;
-  --font-mono: monospace;
+  --font-serif: 'Georgia', 'Bitstream Charter', 'Charis SIL', Utopia, 'URW Bookman L', serif;
+  --font-mono: 'SF Mono', Menlo, Consolas, Monaco, monospace;
 
   --style-radius-s: #{$style-radius-s};
   --style-radius-m: #{$style-radius-m};
@@ -146,13 +146,13 @@ h6 {
 }
 
 p {
-  margin: 0 0 $baseline;
+  margin: 0;
 }
 
 ul,
 ol {
   padding-left: $baseline;
-  margin: 0 0 $baseline;
+  margin: 0;
 }
 
 :focus-visible {

packages/richtext-slate/src/scss/type.scss

@@ -16,7 +16,7 @@
 }
 
 %h1 {
-  margin: 0 0 base(1);
+  margin: 0;
   font-size: base(1.6);
   line-height: base(1.8);
 
@@ -27,7 +27,7 @@
 }
 
 %h2 {
-  margin: 0 0 base(1);
+  margin: 0;
   font-size: base(1.3);
   line-height: base(1.6);
 
@@ -37,7 +37,7 @@
 }
 
 %h3 {
-  margin: 0 0 base(1);
+  margin: 0;
   font-size: base(1);
   line-height: base(1.2);
 
@@ -48,7 +48,7 @@
 }
 
 %h4 {
-  margin: 0 0 $baseline;
+  margin: 0;
   font-size: base(0.8);
   line-height: base(1);
   letter-spacing: -0.375px;