Update blockquote to restore some OG styling, show nested example in docs (#42120)

Author: mdo

scss/content/_type.scss

@@ -12,8 +12,11 @@ $blockquote-tokens: () !default;
 $blockquote-tokens: defaults(
   (
     --blockquote-gap: calc(var(--spacer) / 2),
+    --blockquote-padding-x: var(--spacer),
     --blockquote-margin-y: 1rem,
     --blockquote-font-size: var(--font-size-md),
+    --blockquote-border-width: .25rem,
+    --blockquote-border-color: var(--border-color),
     --blockquote-footer-font-size: var(--font-size-sm),
     --blockquote-footer-color: var(--fg-3),
   ),
@@ -59,8 +62,10 @@ $blockquote-tokens: defaults(
     display: flex;
     flex-direction: column;
     gap: var(--blockquote-gap);
+    padding-inline-start: var(--blockquote-padding-x);
     margin-bottom: var(--blockquote-margin-y);
     font-size: var(--blockquote-font-size);
+    border-inline-start: var(--blockquote-border-width) solid var(--blockquote-border-color);
 
     > * {
       margin-bottom: 0;

site/src/content/docs/content/typography.mdx

@@ -143,6 +143,15 @@ For source attribution, use a `<figcaption>` or a block level element (e.g., `<p
     </figcaption>
   </figure>`} />
 
+### Nested
+
+<Example code={`<blockquote class="blockquote">
+    <p>A well-known quote, contained in a blockquote element.</p>
+    <blockquote class="blockquote">
+      <p>A well-known quote, contained in a blockquote element.</p>
+    </blockquote>
+  </blockquote>`} />
+
 ### Alignment
 
 Use text or flex utilities as needed to change the alignment of your blockquote.