From 11fc6f006e91d7c083932a3e2d3db89cb9521709 Mon Sep 17 00:00:00 2001
From: Lauri Eskola <lauri.eskola@acquia.com>
Date: Wed, 23 Feb 2022 09:51:19 +0200
Subject: [PATCH] Issue #3214124 by imalabya, Sakthivel M, javi-er, vicheldt,
 naveen433, kostyashupenko, yogeshmpawar, ankithashetty, Gauravmahlawat, dww,
 saschaeggi, ckrina, tushar_sachdeva: Quotations are missing for the HTML
 <blockquote> Element in Claro theme

---
 core/themes/claro/css/base/elements.css       | 27 ++++++++++++++++++-
 core/themes/claro/css/base/elements.pcss.css  | 23 +++++++++++++++-
 core/themes/claro/css/base/variables.css      |  1 +
 core/themes/claro/css/base/variables.pcss.css |  1 +
 4 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/core/themes/claro/css/base/elements.css b/core/themes/claro/css/base/elements.css
index 65f88fb70f1..ca5deffa009 100644
--- a/core/themes/claro/css/base/elements.css
+++ b/core/themes/claro/css/base/elements.css
@@ -130,7 +130,32 @@ dl dl {
 }
 
 blockquote {
-  margin: 1em 2.5rem;
+  position: relative;
+  margin: var(--space-l);
+  margin-left: 2.5rem; /* LTR */
+  font-size: var(--font-size-h6);
+}
+
+[dir="rtl"] blockquote {
+  margin-right: 2.5rem;
+}
+
+blockquote::before {
+  position: absolute;
+  left: -2.5rem; /* LTR */
+  content: open-quote;
+  color: var(--color-absolutezero);
+  font-family: var(--font-family-serif);
+  font-size: var(--space-xl);
+  line-height: 1em;
+}
+
+[dir="rtl"] blockquote::before {
+  right: -2.5rem;
+}
+
+blockquote::after {
+  content: no-close-quote;
 }
 
 address {
diff --git a/core/themes/claro/css/base/elements.pcss.css b/core/themes/claro/css/base/elements.pcss.css
index 2e1ce76f007..e716912562c 100644
--- a/core/themes/claro/css/base/elements.pcss.css
+++ b/core/themes/claro/css/base/elements.pcss.css
@@ -107,7 +107,28 @@ dl dl {
   margin-right: 20px;
 }
 blockquote {
-  margin: 1em 40px;
+  position: relative;
+  margin: var(--space-l);
+  margin-left: 2.5rem; /* LTR */
+  font-size: var(--font-size-h6);
+}
+[dir="rtl"] blockquote {
+  margin-right: 2.5rem;
+}
+blockquote::before {
+  position: absolute;
+  left: -2.5rem; /* LTR */
+  content: open-quote;
+  color: var(--color-absolutezero);
+  font-family: var(--font-family-serif);
+  font-size: var(--space-xl);
+  line-height: 1em;
+}
+[dir="rtl"] blockquote::before {
+  right: -2.5rem;
+}
+blockquote::after {
+  content: no-close-quote;
 }
 address {
   font-style: italic;
diff --git a/core/themes/claro/css/base/variables.css b/core/themes/claro/css/base/variables.css
index 903b4a8850b..0119a078916 100644
--- a/core/themes/claro/css/base/variables.css
+++ b/core/themes/claro/css/base/variables.css
@@ -55,6 +55,7 @@
    * Typography.
    */
   --font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  --font-family-serif: "Times New Roman", times, serif;
   --line-height: 1.5;
   --line-height-heading: 1.3;
   --line-height-form-label: 1.125rem; /* 18px */
diff --git a/core/themes/claro/css/base/variables.pcss.css b/core/themes/claro/css/base/variables.pcss.css
index 62163019d4d..636deea2300 100644
--- a/core/themes/claro/css/base/variables.pcss.css
+++ b/core/themes/claro/css/base/variables.pcss.css
@@ -49,6 +49,7 @@
    * Typography.
    */
   --font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  --font-family-serif: "Times New Roman", times, serif;
   --line-height: 1.5;
   --line-height-heading: 1.3;
   --line-height-form-label: calc(18rem / 16); /* 18px */