From 27a481ab72bdce0bf7bf30ef9e08001f3ed2803f Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Fri, 14 Nov 2025 21:38:20 -0800
Subject: [PATCH] Tweak styling of examples and callouts a little more

---
 site/src/components/shortcodes/Example.astro |  6 +++---
 site/src/scss/_callouts.scss                 |  2 +-
 site/src/scss/_clipboard-js.scss             |  4 ++--
 site/src/scss/_component-examples.scss       | 16 ++++++++++------
 4 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/site/src/components/shortcodes/Example.astro b/site/src/components/shortcodes/Example.astro
index a85f10337d..658e835bea 100644
--- a/site/src/components/shortcodes/Example.astro
+++ b/site/src/components/shortcodes/Example.astro
@@ -76,7 +76,7 @@ const simplifiedMarkup = sourceMarkup
 <div class="bd-example-snippet bd-code-snippet">
   {
     showPreview && (
-      <div id={id} class:list={['bd-example m-0 border-0', className]}>
+      <div id={id} class:list={['bd-example m-0', className]}>
         <Fragment set:html={markup} />
       </div>
     )
@@ -86,8 +86,8 @@ const simplifiedMarkup = sourceMarkup
     showMarkup && (
       <>
         {showPreview && (
-          <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom">
-            <small class="font-monospace text-body-secondary text-uppercase">{lang}</small>
+          <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 pt-2">
+            <small class="font-monospace fg-3 text-uppercase">{lang}</small>
             <div class="d-flex ms-auto">
               <button
                 type="button"
diff --git a/site/src/scss/_callouts.scss b/site/src/scss/_callouts.scss
index 20d8076ced..6358ea5a6b 100644
--- a/site/src/scss/_callouts.scss
+++ b/site/src/scss/_callouts.scss
@@ -22,7 +22,7 @@
     background-color: var(--bd-callout-bg, var(--bs-gray-100));
     border: 1px solid var(--bd-callout-border, var(--bs-border-color));
     border-inline-start: .25rem solid var(--bd-callout-border, var(--bs-gray-300));
-    @include border-radius(var(--bs-border-radius));
+    @include border-radius(var(--bs-border-radius-lg));
     // box-shadow: inset .25rem 0 0 var(--bd-callout-border, var(--bs-gray-300));
 
     h4 {
diff --git a/site/src/scss/_clipboard-js.scss b/site/src/scss/_clipboard-js.scss
index e89b82edf5..9bcfe13d53 100644
--- a/site/src/scss/_clipboard-js.scss
+++ b/site/src/scss/_clipboard-js.scss
@@ -26,13 +26,13 @@
     display: block;
     padding: .5em;
     line-height: 1;
-    color: var(--bs-body-color);
+    color: var(--bs-fg-3);
     background-color: var(--bd-pre-bg);
     border: 0;
     @include border-radius(.25rem);
 
     &:hover {
-      color: var(--bs-link-hover-color);
+      color: var(--bs-body-color);
     }
 
     &:focus {
diff --git a/site/src/scss/_component-examples.scss b/site/src/scss/_component-examples.scss
index 796151aeef..8827b96291 100644
--- a/site/src/scss/_component-examples.scss
+++ b/site/src/scss/_component-examples.scss
@@ -11,14 +11,12 @@
 
 @layer custom {
   .bd-code-snippet {
+    --bd-example-border-width: 4px;
     margin: 0 ($bd-gutter-x * -.5) 1rem;
-    border: solid var(--bs-border-color);
-    border-width: 1px 0;
 
     @include media-breakpoint-up(md) {
       margin-inline: 0;
-      border-width: 1px;
-      @include border-radius(var(--bs-border-radius));
+      @include border-radius(var(--bs-border-radius-lg));
     }
   }
 
@@ -29,7 +27,8 @@
     display: flow-root;
     padding: var(--bd-example-padding);
     margin: 0 ($bd-gutter-x * -.5) 1rem;
-    border: solid var(--bs-border-color);
+    background-color: var(--bs-bg-body);
+    border: solid var(--bs-border-subtle);
     border-width: 1px 0;
 
     @include media-breakpoint-up(md) {
@@ -37,7 +36,7 @@
 
       margin-inline: 0;
       border-width: 1px;
-      @include border-radius(var(--bs-border-radius));
+      @include border-radius(calc(var(--bs-border-radius-lg) - var(--bd-example-border-width)));
     }
 
     + p {
@@ -115,6 +114,11 @@
     }
   }
 
+  .bd-example-snippet {
+    padding: var(--bd-example-border-width);
+    background-color: var(--bd-pre-bg);
+  }
+
   //
   // Grid examples
   //
-- 
2.47.3