Scope docs CSS to custom layer

site/src/components/shortcodes/JsDocs.astro

@@ -55,8 +55,10 @@ try {
 <Code containerClass="bd-example-snippet bd-code-snippet bd-file-ref" code={content} lang="js">
   <div slot="pre" class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
     <a
-      class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small"
+      class="text-decoration-none color-body"
       href={`${getConfig().repo}/blob/v${getConfig().current_version}/${file}`.replaceAll('\\', '/')}
+      target="_blank"
+      rel="noopener noreferrer"
     >
       {file}
     </a>

site/src/components/shortcodes/ScssDocs.astro

@@ -57,8 +57,10 @@ try {
 <Code containerClass="bd-example-snippet bd-file-ref" code={content} lang="scss">
   <div slot="pre" class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
     <a
-      class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small"
+      class="text-decoration-none color-body"
       href={`${getConfig().repo}/blob/v${getConfig().current_version}/${file}`.replaceAll('\\', '/')}
+      target="_blank"
+      rel="noopener noreferrer"
     >
       {file}
     </a>

site/src/scss/_ads.scss

@@ -8,6 +8,7 @@
 // Carbon ads
 //
 
+@layer custom {
   #carbonads {
     position: static;
     max-width: 400px;
@@ -64,3 +65,4 @@
     margin-top: .75rem;
     color: var(--bs-fg-3) !important;
   }
+}

site/src/scss/_anchor.scss

@@ -1,6 +1,7 @@
 @use "../../../scss/variables" as *;
 @use "../../../scss/mixins/transition" as *;
 
+@layer custom {
   .anchor-link {
     padding: 0 .175rem;
     font-weight: 400;
@@ -22,3 +23,4 @@
       opacity: 1;
     }
   }
+}

site/src/scss/_brand.scss

@@ -7,6 +7,7 @@
 // Brand guidelines
 //
 
+@layer custom {
   // Logo series wrapper
   .bd-brand-logos {
     color: $bd-violet;
@@ -63,3 +64,4 @@
       height: 6rem;
     }
   }
+}

site/src/scss/_buttons.scss

@@ -3,10 +3,7 @@
 @use "../../../scss/colors" as *;
 @use "variables" as *;
 
-// Buttons
-//
-// Custom buttons for the docs.
-
+@layer custom {
   // scss-docs-start btn-css-vars-example
   .btn-bd-primary {
     --bs-btn-font-weight: 600;
@@ -55,3 +52,4 @@
 
     padding: .8125rem 2rem;
   }
+}

site/src/scss/_callouts.scss

@@ -7,6 +7,7 @@
 // Callouts
 //
 
+@layer custom {
   .bd-callout {
     --#{$prefix}link-color: var(--bd-callout-color);
     --#{$prefix}link-hover-color: var(--bd-callout-color);
@@ -51,3 +52,4 @@
       --bd-callout-border: var(--bs-#{$variant}-border);
     }
   }
+}

site/src/scss/_clipboard-js.scss

@@ -5,6 +5,7 @@
 //
 // JS-based `Copy` buttons for code snippets.
 
+@layer custom {
   .bd-clipboard,
   .bd-edit {
     position: relative;
@@ -42,6 +43,7 @@
   .btn-clipboard {
     position: relative;
     z-index: 2;
-  margin-top: 1.25rem;
-  margin-right: .75rem;
+    margin-top: .5rem;
+    margin-right: .5rem;
+  }
 }

site/src/scss/_component-examples.scss

@@ -346,7 +346,7 @@
   .highlight {
     position: relative;
     padding: .75rem ($bd-gutter-x * .5);
-    background-color: var(--bs-bg-1);
+    background-color: var(--bd-pre-bg);
 
     @include media-breakpoint-up(md) {
       padding: 1rem;

site/src/scss/_content.scss

@@ -8,6 +8,7 @@
 // Bootstrap docs content theming
 //
 
+@layer custom {
   .bd-content {
     > h2,
     > h3,
@@ -119,21 +120,6 @@
     min-width: 280px;
   }
 
-.table-swatches {
-  th {
-    color: var(--bs-emphasis-color);
-  }
-
-  td code {
-    white-space: nowrap;
-  }
-
-  // Astro HTML parser adds extra <p> tags to the content
-  td p {
-    margin: 0;
-  }
-}
-
   .bd-title {
     --bs-heading-color: var(--bs-emphasis-color);
     @include font-size(3rem);
@@ -193,3 +179,4 @@
     }
   }
   // scss-docs-end custom-color-mode
+}

site/src/scss/_footer.scss

@@ -2,6 +2,7 @@
 // Footer
 //
 
+@layer custom {
   .bd-footer {
     a {
       color: var(--bs-body-color);
@@ -14,3 +15,4 @@
       }
     }
   }
+}

site/src/scss/_layout.scss

@@ -2,6 +2,7 @@
 @use "../../../scss/layout/breakpoints" as *;
 @use "variables" as *;
 
+@layer custom {
   .bd-gutter {
     --bs-gutter-x: #{$bd-gutter-x};
   }
@@ -14,6 +15,10 @@
       grid-template-columns: 1fr 5fr;
       gap: $grid-gutter-width;
     }
+
+    @include media-breakpoint-up(xl) {
+      gap: 2rem;
+    }
   }
 
   .bd-sidebar {
@@ -59,3 +64,4 @@
     grid-area: content;
     min-width: 1px; // Fix width when bd-content contains a `<pre>` https://github.com/twbs/bootstrap/issues/25410
   }
+}

site/src/scss/_masthead.scss

@@ -7,6 +7,7 @@
 @use "../../../scss/mixins/transition" as *;
 @use "../../../scss/mixins/color-mode" as *;
 
+@layer custom {
   .bd-masthead {
     --bd-pink-rgb: #{to-rgb($pink)};
     padding: 3rem 0;
@@ -132,3 +133,4 @@
   //     }
   //   }
   // }
+}

site/src/scss/_navbar.scss

@@ -6,6 +6,7 @@
 @use "../../../scss/layout/breakpoints" as *;
 @use "../../../scss/vendor/rfs" as *;
 
+@layer custom {
   .bd-navbar {
     padding: .75rem 0;
     background-color: transparent;
@@ -140,3 +141,4 @@
       box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
     }
   }
+}

site/src/scss/_placeholder-img.scss

@@ -6,6 +6,7 @@
 
 // Remember to update `site/_layouts/examples.html` too if this changes!
 
+@layer custom {
   .bd-placeholder-img {
     @include font-size(1.125rem);
     user-select: none;
@@ -15,3 +16,4 @@
   .bd-placeholder-img-lg {
     @include font-size(3.5rem);
   }
+}

site/src/scss/_scrolling.scss

@@ -1,5 +1,6 @@
 // When navigating with the keyboard, prevent focus from landing behind the sticky header
 
+@layer custom {
   main {
     a,
     button,
@@ -14,3 +15,4 @@ main {
       scroll-margin-bottom: 100px;
     }
   }
+}

site/src/scss/_search.scss

@@ -31,6 +31,7 @@
   --docsearch-muted-color: #7f8497;
 }
 
+@layer custom {
   .bd-search {
     position: relative;
 
@@ -177,3 +178,4 @@
   .DocSearch-Logo svg .cls-2 {
     fill: var(--docsearch-logo-color);
   }
+}

site/src/scss/_sidebar.scss

@@ -2,6 +2,7 @@
 @use "../../../scss/layout/breakpoints" as *;
 @use "../../../scss/mixins/border-radius" as *;
 
+@layer custom {
   .bd-sidebar {
     @include media-breakpoint-up(lg) {
       position: sticky;
@@ -72,3 +73,4 @@
       font-weight: 600;
     }
   }
+}

site/src/scss/_skippy.scss

@@ -1,6 +1,7 @@
 @use "../../../scss/colors" as *;
 @use "variables" as *;
 
+@layer custom {
   .skippy {
     background-color: $bd-purple;
 
@@ -8,3 +9,4 @@
       color: $white;
     }
   }
+}

site/src/scss/_syntax.scss

@@ -43,6 +43,7 @@
 }
 
 // Shell prompts
+@layer custom {
   .language-bash .line::before,
   .language-sh .line::before {
     display: inline-block;
@@ -161,3 +162,4 @@
       color: var(--base03);
     }
   }
+}

site/src/scss/_toc.scss

@@ -4,6 +4,7 @@
 
 // stylelint-disable selector-max-type, selector-no-qualifying-type
 
+@layer custom {
   .bd-toc {
     container-type: inline-size;
 
@@ -98,3 +99,4 @@
       display: block !important; // stylelint-disable-line declaration-no-important
     }
   }
+}