Change design of rich text elements in web UI (#32633)

app/javascript/images/quote.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.933 2.82414C22.324 4.07931 21.0726 5.3569 20.1788 6.6569C19.3296 7.91207 18.905 9.1 18.905 10.2207C19.0838 10.131 19.3073 10.0862 19.5754 10.0862C19.8883 10.0414 20.1564 10.019 20.3799 10.019C21.4078 10.019 22.257 10.4448 22.9274 11.2966C23.6425 12.1034 24 13.1121 24 14.3224C24 15.8017 23.5084 17.0345 22.5251 18.0207C21.5419 19.0069 20.3129 19.5 18.838 19.5C17.2737 19.5 16.0447 18.9397 15.1508 17.819C14.257 16.6535 13.8101 15.1069 13.8101 13.1793C13.8101 10.8931 14.5028 8.62931 15.8883 6.38793C17.2737 4.14655 19.3073 2.01724 21.9888 0L23.933 2.82414ZM10.1229 2.82414C8.51397 4.07931 7.26257 5.3569 6.36872 6.6569C5.51955 7.91207 5.09497 9.1 5.09497 10.2207C5.27374 10.131 5.49721 10.0862 5.76536 10.0862C6.07821 10.0414 6.34637 10.019 6.56983 10.019C7.59777 10.019 8.44693 10.4448 9.11732 11.2966C9.8324 12.1034 10.1899 13.1121 10.1899 14.3224C10.1899 15.8017 9.69832 17.0345 8.71508 18.0207C7.73184 19.0069 6.50279 19.5 5.02793 19.5C3.46369 19.5 2.23464 18.9397 1.34078 17.819C0.446927 16.6535 0 15.1069 0 13.1793C0 10.8931 0.692738 8.62931 2.07821 6.38793C3.46369 4.14655 5.49721 2.01724 8.17877 0L10.1229 2.82414Z" fill="currentColor" />
+</svg>

app/javascript/styles/mastodon-light/variables.scss

@@ -76,4 +76,7 @@ body {
   --background-color-tint: rgba(255, 255, 255, 80%);
   --background-filter: blur(10px);
   --on-surface-color: #{transparentize($ui-base-color, 0.65)};
+  --rich-text-container-color: rgba(255, 216, 231, 100%);
+  --rich-text-text-color: rgba(114, 47, 83, 100%);
+  --rich-text-decorations-color: rgba(255, 175, 212, 100%);
 }

app/javascript/styles/mastodon/rich_text.scss

@@ -2,9 +2,29 @@
 .e-content,
 .edit-indicator__content,
 .reply-indicator__content {
+  code {
+    background: var(--rich-text-container-color);
+    padding: 4px;
+    border-radius: 4px;
+    color: var(--rich-text-text-color);
+    font-size: 0.85em;
+  }
+
+  pre {
+    background: var(--rich-text-container-color);
+    padding: 8px;
+    border-radius: 4px;
+    color: var(--rich-text-text-color);
+
+    code {
+      padding: 0;
+      background: transparent;
+    }
+  }
+
   pre,
   blockquote {
-    margin-bottom: 20px;
+    margin-bottom: 22px;
     white-space: pre-wrap;
     unicode-bidi: plaintext;
 
@@ -14,19 +34,45 @@
   }
 
   blockquote {
-    padding-inline-start: 10px;
-    border-inline-start: 3px solid $darker-text-color;
-    color: $darker-text-color;
+    padding-inline-start: 32px;
+    color: var(--rich-text-text-color);
     white-space: normal;
+    position: relative;
 
-    p:last-child {
+    &::before {
+      display: block;
+      content: '';
+      width: 24px;
+      height: 20px;
+      mask-image: url('../images/quote.svg');
+      background-color: var(--rich-text-decorations-color);
+      position: absolute;
+      inset-inline-start: 0;
+      top: 0;
+    }
+
+    blockquote {
+      margin-top: 4px;
+      border-inline-start: 3px solid var(--rich-text-decorations-color);
+      padding-inline-start: 16px;
+
+      &::before {
+        display: none;
+      }
+    }
+
+    p:last-of-type {
       margin-bottom: 0;
     }
   }
 
   & > ul,
   & > ol {
-    margin-bottom: 20px;
+    margin-bottom: 22px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
 
   b,
@@ -41,7 +87,15 @@
 
   ul,
   ol {
-    margin-inline-start: 2em;
+    padding-inline-start: 24px;
+
+    li {
+      padding-inline-start: 8px;
+
+      &::marker {
+        text-align: end;
+      }
+    }
 
     p {
       margin: 0;
@@ -49,7 +103,11 @@
   }
 
   ul {
-    list-style-type: disc;
+    list-style-type: '•';
+
+    li::marker {
+      text-align: start;
+    }
   }
 
   ol {

app/javascript/styles/mastodon/variables.scss

@@ -116,4 +116,7 @@ $font-monospace: 'mastodon-font-monospace' !default;
   --error-background-color: #{darken($error-red, 16%)};
   --error-active-background-color: #{darken($error-red, 12%)};
   --on-error-color: #fff;
+  --rich-text-container-color: rgba(87, 24, 60, 100%);
+  --rich-text-text-color: rgba(255, 175, 212, 100%);
+  --rich-text-decorations-color: rgba(128, 58, 95, 100%);
 }