Update quote styles

.changeset/afraid-experts-approve.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Update pull quote and block quote styles

src/base/_themes.scss

@@ -17,6 +17,7 @@
   --theme-color-background-kbd: transparent;
   --theme-color-background-secondary: #{color.$base-gray-lighter};
   --theme-color-border-kbd: #{color.$base-gray-light};
+  --theme-color-border-text-group: #{color.$base-gray-light};
   --theme-color-text-action: #{color.$text-action};
   --theme-color-text-base: #{color.$text-dark};
   --theme-color-text-code: #{color.$base-fuchsia};
@@ -34,6 +35,7 @@
   --theme-color-background-kbd: #{color.$brand-primary-dark};
   --theme-color-background-secondary: #{color.$brand-primary-dark};
   --theme-color-border-kbd: #{color.$brand-primary-darker};
+  --theme-color-border-text-group: #{color.$brand-primary-darker};
   --theme-color-text-action: var(--theme-color-text-emphasis);
   --theme-color-text-base: #{color.$text-light};
   --theme-color-text-code: var(--theme-color-text-emphasis);

src/components/comment/comment.scss

@@ -2,6 +2,7 @@
 @use '../../compiled/tokens/scss/color';
 @use '../../compiled/tokens/scss/font-weight';
 @use '../../compiled/tokens/scss/size';
+@use '../../mixins/emdash';
 @use '../../mixins/headings';
 @use '../../mixins/theme';
 
@@ -25,6 +26,7 @@
 /// those comments visually with their parent.
 .c-comment.is-replying::after,
 .c-comment--thread::after {
+  background-color: var(--theme-color-border-text-group);
   border-radius: size.$border-radius-full;
   content: '';
   display: block;
@@ -33,14 +35,6 @@
   margin-left: auto;
   margin-right: auto;
   width: size.$edge-medium;
-
-  @include theme.styles() {
-    background-color: color.$base-gray-light;
-  }
-
-  @include theme.styles(dark) {
-    background-color: color.$base-blue-darker;
-  }
 }
 
 /// Comment reply forms are hidden until someone starts a reply.
@@ -83,6 +77,23 @@
   margin-top: math.div(size.$rhythm-condensed, -4);
 }
 
+// We added default styles to the blockquote element using the `wp-block-quote`
+// class. We're applying those same styles here, so comment blockquotes look
+// the similar.
+
+.c-comment__content blockquote {
+  border-left: size.$border-width-blockquote solid var(--theme-color-border-kbd);
+  color: var(--theme-color-text-muted);
+}
+
+.c-comment__content blockquote cite {
+  font-style: normal;
+}
+
+.c-comment__content blockquote cite::before {
+  @include emdash.content;
+}
+
 .c-comment__footer {
   grid-area: footer;
 }

src/mixins/_emdash.scss

@@ -0,0 +1,7 @@
+/**
+ * Create an em dash.
+ */
+
+@mixin content {
+  content: '—';
+}

src/prototypes/quotes/example/example.twig

@@ -7,29 +7,31 @@
       <p>
         A pull quote is a brief, attention-catching quotation, typically in a distinctive typeface, taken from the main text of an article and used as a subheading or graphic feature.
       </p>
-      <blockquote class="pull-quote">
-        <p>
-           Thinking is easy, acting is difficult, and to put one’s thoughts into action is the <em>most difficult</em> thing in the world.
-        </p>
-        <footer>
-          <cite>
-            &mdash; Johann Wolfgang von Goethe
-          </cite>
-        </footer>
-      </blockquote>
+      <div class="wp-block-pullquote has-background is-style-solid-color u-pull-inline-1">
+        <blockquote>
+          <p>
+            Thinking is easy, acting is difficult, and to put one’s thoughts into action is the <em>most difficult</em> thing in the world.
+          </p>
+          <footer>
+            <cite>
+              Johann Wolfgang von Goethe
+            </cite>
+          </footer>
+        </blockquote>
+      </div>
       <h2>
         Block Quote
       </h2>
       <p>
         A block quotation is a quotation in a written document that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size font.
       </p>
-      <blockquote class="blockquote">
+      <blockquote class="wp-block-quote">
         <p>
           The way of fortune is like the milky way in the sky; which is a number of small stars, not seen asunder, but giving light together: so it is a number of little and scarce discerned virtues, or rather faculties and customs, that make men fortunate.
         </p>
         <footer>
           <cite>
-            &mdash; Francis Bacon
+            Francis Bacon
           </cite>
         </footer>
       </blockquote>

src/prototypes/quotes/quotes.stories.js

@@ -1,5 +1,4 @@
 import examplePrototype from './example/example.twig';
-import './example/example.scss';
 
 export default {
   title: 'Prototypes/Quotes',

src/tokens/size/border.json

@@ -10,6 +10,9 @@
           "value": "9999px",
           "comment": "A value of 50% would be more intuitive, but results in unexpectedly oblong rounding for non-square shapes. We use `px` to save the browser the trouble of recalculating the stupidly large value."
         }
+      },
+      "width": {
+        "blockquote": { "value": "{size.edge.medium.value}" }
       }
     }
   }

src/vendor/wordpress/core-blocks.stories.mdx

@@ -466,7 +466,7 @@ applied only if the solid color background is toggled on.
 
 <Canvas>
   <Story name="Pullquote">
-    {`<figure class="wp-block-pullquote has-background is-style-solid-color" style="background-color:#dcd7ca">
+    {`<figure class="wp-block-pullquote has-background is-style-solid-color">
         <blockquote class="has-text-color has-accent-color">
           <p>One of the hardest things to do in technology is disrupt yourself.</p>
           <cite>Matt Mullenweg</cite>

src/vendor/wordpress/styles/_core-blocks.scss

@@ -1,9 +1,13 @@
 @use "sass:math";
 @use "../../../compiled/tokens/scss/breakpoint";
+@use "../../../compiled/tokens/scss/color";
 @use "../../../compiled/tokens/scss/line-height";
 @use "../../../compiled/tokens/scss/size";
 @use "../../../mixins/button";
+@use "../../../mixins/emdash";
+@use "../../../mixins/ms";
 @use "../../../mixins/table";
+@use "../../../mixins/theme";
 
 /**
  * Gutenberg block: Button
@@ -174,46 +178,106 @@ $wp-button-gap: size.$spacing-gap-button-group-default;
  * Styles for quotes and pull-quotes
  */
 
+.wp-block-pullquote,
+.wp-block-quote {
+  color: var(--theme-color-text-muted);
+}
+
 /**
- * Makes the line-height more consistent with existing typographic styles.
+ * 1. Reset bottom margin
+ * 2. Reset padding
+ * 3. Reset text alignment
  */
-.wp-block-quote.is-large,
+
 .wp-block-pullquote {
-  p {
-    line-height: line-height.$tight;
-  }
+  background-color: var(--theme-color-background-secondary);
+  border-radius: size.$border-radius-medium;
+  margin-bottom: 0; /* 1 */
+  padding: 0; /* 2 */
+  text-align: left; /* 3 */
 }
 
-.wp-block-pullquote {
-  padding: size.$padding-control-vertical 0;
+/**
+ * Our default styles for the blockquote element include `padding-left`.
+ * Pullquotes get padding on every side.
+ */
+
+.wp-block-pullquote blockquote {
+  padding: ms.step(1);
 }
 
 /**
- * The quote itself defaults to being italic, this straightens out the quote
+ * 1. Adjacent children of blockquotes have vertical spacing. Making `cite`
+ *    a block level element so that it has the same spacing.
  */
-.wp-block-quote.is-style-large p,
-.wp-block-quote.is-large p {
+
+.wp-block-pullquote cite,
+.wp-block-quote cite {
+  display: block; /* 1 */
   font-style: normal;
 }
 
 /**
- * The pull-quote isn't italic at all, so for consistency, the cite is
- * italicized.
+ * Add an em dash before the citation.
  */
-.wp-block-pullquote.is-style-solid-color blockquote cite {
-  font-style: italic;
+
+.wp-block-pullquote cite::before,
+.wp-block-quote cite::before {
+  @include emdash.content;
 }
 
 /**
- * The quote is a little squished on small screens so the max width
- * is increased.
+ * Makes the line-height more consistent with existing typographic styles.
  */
+
+.wp-block-pullquote,
+.wp-block-quote.is-large,
+.wp-block-quote.is-style-large {
+  p {
+    line-height: line-height.$tight;
+  }
+}
+
+/**
+ * Reset the max-width so the text spans the width of the container.
+ */
+
+.wp-block-pullquote.is-style-solid-color {
+  blockquote {
+    max-width: 100%;
+  }
+}
+
+.wp-block-pullquote,
 .wp-block-pullquote.is-style-solid-color blockquote {
-  @media (min-width: breakpoint.$xs) {
-    max-width: 80%;
+  p {
+    font-size: ms.step(1);
   }
-  @media (min-width: breakpoint.$m) {
-    max-width: 60%;
+}
+
+.wp-block-quote {
+  border-left: size.$border-width-blockquote solid
+    var(--theme-color-border-text-group);
+}
+
+/**
+* 1. Reset margins and padding
+* 2. The quote itself defaults to being italic, this straightens out the quote
+*/
+.wp-block-quote.is-style-large,
+.wp-block-quote.is-large {
+  margin: 0; /* 1 */
+  padding-left: ms.step(1); /* 1 */
+  padding-right: 0; /* 1 */
+
+  p {
+    font-size: ms.step(0);
+    font-style: normal; /* 2 */
+  }
+
+  cite {
+    font-size: ms.step(0);
+    text-align: left;
   }
 }