Tweak styling of examples and callouts a little more

diff --git a/site/src/components/shortcodes/Example.astro b/site/src/components/shortcodes/Example.astro
index a85f10337d366967c0f102945afa3accfde8cff9..658e835bea42a0aa0bcf8e048889d96948198a66 100644 (file)
--- 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 20d8076cedc6076add95d8a358e56ff3646e45c3..6358ea5a6b62d0a09dc80c4955210a4f49fbc967 100644 (file)
--- 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 e89b82edf55c72fc3f5074faa4ebedce5b8ada47..9bcfe13d5362855fe5a09b5835c0af9b1cce9853 100644 (file)
--- 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 796151aeefb8012d2ffb476a10002db7fd657073..8827b96291fdf8e1f0a4cab9324a49c4a5096a70 100644 (file)
--- 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
   //