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

diff --git a/scss/content/_type.scss b/scss/content/_type.scss
index e22a5518fb642e336c2d6b2b58f85a4d0c00e52e..6aa06e325a6f36a2c927f3a796549e421a04bfe1 100644 (file)
--- a/scss/content/_type.scss
+++ b/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;

diff --git a/site/src/content/docs/content/typography.mdx b/site/src/content/docs/content/typography.mdx
index 6471286a89b9aa60456171ddf2bf98ecbe0811c1..6476650671fee15c48d4550ba7c84ffffcf02bef 100644 (file)
--- a/site/src/content/docs/content/typography.mdx
+++ b/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.