Tweak styling of examples and callouts a little more

scss/_variables.scss

@@ -177,9 +177,9 @@ $border-color-translucent:    rgba($black, .175) !default;
 // scss-docs-end border-variables
 
 // scss-docs-start border-radius-variables
-$border-radius:               .375rem !default;
-$border-radius-sm:            .25rem !default;
-$border-radius-lg:            .5rem !default;
+$border-radius:               .5rem !default;
+$border-radius-sm:            .375rem !default;
+$border-radius-lg:            .75rem !default;
 $border-radius-xl:            1rem !default;
 $border-radius-2xl:           2rem !default;
 $border-radius-pill:          50rem !default;

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"

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 {

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 {

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
   //