Fix color contrast in Markdown Editor (both light & dark).

Fixed color issues that were making things hard to read:
- selected text color, including inline code.
- HTML tags
- Horizontal rule not visible in Preview mode. While at it, I changed the color in Edit mode as well as syntax highlighting.
- blockquote (was gray over gray)

Attempted to fix uneven margins between top and bottom for inline-code and codeblock. Also, removed the extra margin to make it more nice and cosy, instead of far apart.

ui/scss/component/_markdown-editor.scss

@@ -55,9 +55,47 @@
 .form-field--SimpleMDE {
   margin-top: var(--spacing-l);
 
-  // Override hyperlink styles
+  .cm-s-easymde .CodeMirror-cursor {
+    border-left: 1px solid var(--color-editor-cursor);
+  }
+
+  .cm-s-easymde .CodeMirror-selected {
+    background: var(--color-editor-selected);
+  }
+
+  .cm-s-easymde .cm-hr {
+    color: var(--color-editor-tag);
+  }
+
+  .cm-s-easymde .cm-tag {
+    color: var(--color-editor-tag);
+  }
+
+  .cm-s-easymde .cm-attribute {
+    color: var(--color-editor-attr);
+  }
+
+  .cm-s-easymde .cm-string {
+    color: var(--color-editor-string);
+  }
+
+  .cm-s-easymde .cm-comment {
+    background: var(--color-editor-inline-code-bg);
+    padding: 3px 0px; // @todo: should fill up line-spacing instead of harcoded.
+  }
+
   .cm-s-easymde .cm-link {
-    color: inherit;
+    color: var(--color-editor-link);
+  }
+
+  .cm-s-easymde .cm-url {
+    color: var(--color-editor-url);
+    font-style: italic;
+  }
+
+  .cm-s-easymde .cm-quote {
+    color: var(--color-editor-quote);
+    font-style: italic;
   }
 
   // Overriding the lbry/components form styling

ui/scss/component/_markdown-preview.scss

@@ -114,6 +114,7 @@
     margin-bottom: 2rem;
     position: relative;
     top: 1rem;
+    border: 1px solid var(--color-editor-hr-preview);
   }
 
   // Code blocks
@@ -123,8 +124,8 @@
     word-break: break-all;
 
     code {
-      margin-bottom: var(--spacing-m);
+      margin-bottom: var(--spacing-medium);
-      padding: var(--spacing-m);
+      padding: var(--spacing-s) var(--spacing-s) calc(var(--spacing-s) - 2px);
       display: block;
       white-space: pre-wrap;
     }
@@ -132,12 +133,12 @@
 
   // Inline code
   code {
-    background-color: var(--color-blockquote);
+    color: var(--color-editor-inline-code-fg-preview);
+    background-color: var(--color-editor-inline-code-bg-preview);
     display: inline-block;
-    margin: var(--spacing-xxs);
     border-radius: 0.2rem;
     font-size: var(--font-small);
-    padding: calc(var(--spacing-xxs) - 4px) var(--spacing-xxs);
+    padding: calc(var(--spacing-xxs) - 4px) var(--spacing-xxs) calc(var(--spacing-xxs) - 5px);
   }
 
   a {

ui/scss/themes/dark.scss

@@ -98,6 +98,22 @@
   // Snack
   --color-snack-bg: var(--color-secondary);
 
+  // Editor
+  --color-editor-cursor: var(--color-text);
+  --color-editor-quote: #d3d3d3;
+  --color-editor-tag: #efbe5d;
+  --color-editor-attr: #68ccf9;
+  --color-editor-string: #ff8b6b;
+  --color-editor-inline-code-fg: #ce9178;
+  --color-editor-inline-code-fg-preview: #eeeeee;
+  --color-editor-inline-code-bg: rgba(20, 68, 102, 0.3);
+  --color-editor-inline-code-bg-preview: #8f9499;
+  --color-editor-selected: #264f78;
+  --color-editor-link: var(--color-link);
+  --color-editor-url: var(--color-editor-string);
+  --color-editor-hr: var(--color-editor-tag);
+  --color-editor-hr-preview: #a0a0a0;
+
   // Ads
   --color-ads-background: #475057;
   --color-ads-text: #111;

ui/scss/themes/light.scss

@@ -67,6 +67,22 @@
   --color-snack-bg-error: var(--color-danger);
   --color-snack-upgrade: var(--color-tertiary);
 
+  // Editor
+  --color-editor-cursor: var(--color-text);
+  --color-editor-quote: #707070;
+  --color-editor-tag: #ea9400;
+  --color-editor-attr: #04b0f4;
+  --color-editor-string: #ff7451;
+  --color-editor-inline-code-fg: var(--color-text);
+  --color-editor-inline-code-fg-preview: #eeeeee;
+  --color-editor-inline-code-bg: rgba(157, 161, 165, 0.3);
+  --color-editor-inline-code-bg-preview: #8f9499;
+  --color-editor-selected: #add6ff;
+  --color-editor-link: var(--color-link);
+  --color-editor-url: var(--color-editor-string);
+  --color-editor-hr: var(--color-editor-tag);
+  --color-editor-hr-preview: #cccccc;
+
   // Ads
   --color-ads-background: #fae5ff;
   --color-ads-link: var(--color-link);