Add `.not-prose` class to revert `.prose` behavior

diff --git a/scss/content/_prose.scss b/scss/content/_prose.scss
index 10215f17618981bec4e687848037c0084fcd266f..8ca26aafc15183d6b2b8932cadc664b467695554 100644 (file)
--- a/scss/content/_prose.scss
+++ b/scss/content/_prose.scss
@@ -21,115 +21,93 @@
       --content-gap: 24px;
     }
 
-    p,
-    ul,
-    ol,
-    dl,
-    pre,
-    table,
-    blockquote {
+    :where(p, ul, ol, dl, pre, table, blockquote):not(:where(.not-prose, .not-prose *)) {
       margin-block: 0;
     }
 
-    :where(ul, ol):not([class]) li:not(:last-child) {
+    :where(ul, ol):not([class]):not(:where(.not-prose, .not-prose *)) li:not(:last-child) {
       margin-bottom: calc(var(--content-gap) / 4);
     }
 
-    li ul,
-    li ol {
+    :where(li ul, li ol):not(:where(.not-prose, .not-prose *)) {
       margin-top: calc(var(--content-gap) / 4);
     }
 
-    hr {
+    :where(hr):not(:where(.not-prose, .not-prose *)) {
       margin: calc(var(--content-gap) * 1.5) 0;
       border: 0;
       border-block-start: var(--border-width) solid var(--hr-border-color);
     }
 
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      &:not([class]) {
-        margin-top: 0;
-        margin-bottom: calc(var(--content-gap) / -2);
-        font-weight: 500;
-        line-height: 1.25;
-
-        code {
-          font-weight: 600;
-          color: inherit;
-        }
+    :where(h1, h2, h3, h4, h5, h6):not([class]):not(:where(.not-prose, .not-prose *)) {
+      margin-top: 0;
+      margin-bottom: calc(var(--content-gap) / -2);
+      font-weight: 500;
+      line-height: 1.25;
+
+      code {
+        font-weight: 600;
+        color: inherit;
       }
     }
 
-    h1,
-    h2 {
-      &:not(:first-child) {
-        margin-top: calc(var(--content-gap) * 1.5);
-      }
+    :where(h1, h2):not(:first-child):not(:where(.not-prose, .not-prose *)) {
+      margin-top: calc(var(--content-gap) * 1.5);
     }
 
-    h3,
-    h4,
-    h5,
-    h6 {
-      &:not(:first-child) {
-        margin-top: calc(var(--content-gap) * 1.25);
-      }
+    :where(h3, h4, h5, h6):not(:first-child):not(:where(.not-prose, .not-prose *)) {
+      margin-top: calc(var(--content-gap) * 1.25);
     }
 
-    h1 {
+    :where(h1):not(:where(.not-prose, .not-prose *)) {
       font-size: 2.25em;
       line-height: 1.1;
     }
-    h2 {
+    :where(h2):not(:where(.not-prose, .not-prose *)) {
       font-size: 1.75em;
     }
-    h3 {
+    :where(h3):not(:where(.not-prose, .not-prose *)) {
       font-size: 1.5em;
     }
-    h4 {
+    :where(h4):not(:where(.not-prose, .not-prose *)) {
       font-size: 1.25em;
     }
-    h5 {
+    :where(h5):not(:where(.not-prose, .not-prose *)) {
       font-size: 1.125em;
     }
-    h6 {
+    :where(h6):not(:where(.not-prose, .not-prose *)) {
       font-size: 1em;
     }
 
-    a:not([class]) {
+    :where(a:not([class])):not(:where(.not-prose, .not-prose *)) {
       color: var(--link-color);
       text-decoration: underline;
       text-decoration-color: color-mix(in srgb, var(--link-color) 25%, transparent);
       text-underline-offset: 4px;
       @include transition(.1s text-decoration-color ease-in-out);
-    }
 
-    a:not([class]):hover {
-      text-decoration-color: var(--link-hover-color);
+      &:hover {
+        text-decoration-color: var(--link-hover-color);
+      }
     }
 
-    img {
+    :where(img):not(:where(.not-prose, .not-prose *)) {
       max-width: 100%;
     }
 
-    blockquote {
+    :where(blockquote):not(:where(.not-prose, .not-prose *)) {
       padding-inline-start: calc(var(--content-gap) / 2);
       margin: 0;
       border-inline-start: 4px solid var(--border-color);
     }
 
-    table {
+    :where(table):not(:where(.not-prose, .not-prose *)) {
       width: 100%;
       border-spacing: 0;
       border-collapse: collapse;
     }
 
-    :where(table:not([class])) {
+    :where(table:not([class])):not(:where(.not-prose, .not-prose *)) {
       td,
       th {
         padding: 6px 12px;
@@ -138,12 +116,11 @@
       }
     }
 
-    dt {
+    :where(dt):not(:where(.not-prose, .not-prose *)) {
       font-weight: 500;
     }
 
-    video,
-    img {
+    :where(video, img):not(:where(.not-prose, .not-prose *)) {
       max-width: 100%;
     }
   }

diff --git a/site/src/components/shortcodes/Example.astro b/site/src/components/shortcodes/Example.astro
index 3bba4705b38b89f34071540bc47050f79c2ef551..7003e285f16c8c89ca0859853e86a275beee4c54 100644 (file)
--- a/site/src/components/shortcodes/Example.astro
+++ b/site/src/components/shortcodes/Example.astro
@@ -73,7 +73,7 @@ const simplifiedMarkup = sourceMarkup
   )
 ---
 
-<div class="bd-example-snippet bd-code-snippet">
+<div class="bd-example-snippet bd-code-snippet not-prose">
   {showPreview && (
     <div id={id} class:list={['bd-example', className]}>
       <Fragment set:html={markup} />

diff --git a/site/src/content/docs/content/prose.mdx b/site/src/content/docs/content/prose.mdx
index 4eb60c613b44ef0fc4a18aa01ffbc46c27c0287c..66b53517d07b8f74bc08e29801f82c83fceaf1fe 100644 (file)
--- a/site/src/content/docs/content/prose.mdx
+++ b/site/src/content/docs/content/prose.mdx
@@ -14,6 +14,10 @@ Wrap your content in the `.prose` class to get modified font-size, line-height,
 - Some headings get an additional `margin-top` to ensure proper spacing between headings and other content.
 - Style blockquotes, code, and other inline elements.
 
+<Callout>
+  The `.not-prose` utility class can be used to opt out of `.prose` typography styles in specific elements. This is useful for components that have their own styling, such as code snippets or examples. Adding a `.prose` within a `.not-prose` won't work.
+</Callout>
+
 ## Example
 
 This is an example of source Markdown that shows several types of HTML content supported in this `.prose` wrapper class.