Docs: Add transparency option

site/assets/js/transparency.js

@@ -0,0 +1,23 @@
+// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
+// IT'S ALL JUST JUNK FOR OUR DOCS!
+// ++++++++++++++++++++++++++++++++++++++++++
+
+/*!
+ * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2024 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ * For details, see https://creativecommons.org/licenses/by/3.0/.
+ */
+
+(() => {
+  const transparencyToggler = document.querySelector('.transparency-toggle')
+  const examplesContainer = document.querySelector('.bd-content')
+
+  transparencyToggler.addEventListener('click', () => {
+    const altText = `Toggle examples' transparency (${examplesContainer.classList.contains('transparency') ? 'inactive' : 'active'})`
+    transparencyToggler.title = altText
+    transparencyToggler.querySelector('span.d-lg-none').textContent = altText
+    transparencyToggler.setAttribute('aria-label', altText)
+    examplesContainer.classList.toggle('transparency')
+  })
+})()

site/assets/scss/_component-examples.scss

@@ -109,6 +109,25 @@
   }
 }
 
+.transparency .bd-example {
+  @include media-breakpoint-up(md) {
+    &::before {
+      @include border-radius(subtract(var(--bs-border-radius), 1px));
+    }
+  }
+
+  &::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -9999;
+    content: "";
+    background: repeating-linear-gradient(-45deg, var(--bs-secondary-bg) 0, var(--bs-secondary-bg) 15px, transparent 15px, transparent 30px);
+  }
+}
+
 //
 // Grid examples
 //

site/layouts/partials/docs-navbar.html

@@ -82,6 +82,15 @@
             <hr class="d-lg-none my-2 text-white-50">
           </li>
 
+          <li class="nav-item col-12 col-lg-auto">
+            <button class="nav-link transparency-toggle py-2 px-0 px-lg-2" title="Toggle examples' transparency (inactive)" aria-label="Toggle examples' transparency (inactive)">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="navbar-nav-svg" viewBox="0 0 16 16" aria-hidden="true">
+                <path d="M0 6.5a6.5 6.5 0 0 1 12.346-2.846 6.5 6.5 0 1 1-8.691 8.691A6.5 6.5 0 0 1 0 6.5m5.144 6.358a5.5 5.5 0 1 0 7.714-7.714 6.5 6.5 0 0 1-7.714 7.714m-.733-1.269q.546.226 1.144.33l-1.474-1.474q.104.597.33 1.144m2.614.386a5.5 5.5 0 0 0 1.173-.242L4.374 7.91a6 6 0 0 0-.296 1.118zm2.157-.672q.446-.25.838-.576L5.418 6.126a6 6 0 0 0-.587.826zm1.545-1.284q.325-.39.576-.837L6.953 4.83a6 6 0 0 0-.827.587l4.6 4.602Zm1.006-1.822q.183-.562.242-1.172L9.028 4.078q-.58.096-1.118.296l3.823 3.824Zm.186-2.642a5.5 5.5 0 0 0-.33-1.144 5.5 5.5 0 0 0-1.144-.33z"/>
+              </svg>
+              <span class="d-lg-none" aria-hidden="true">Toggle examples' transparency (inactive)</span>
+            </button>
+          </li>
+
           <li class="nav-item dropdown">
             {{ partial "theme-toggler" . }}
           </li>

site/layouts/partials/scripts.html

@@ -37,4 +37,7 @@
 {{- $esbuildOptions = merge $esbuildOptions (dict "params" $esbuildParams) -}}
 {{- $stackblitzJs := resources.Get "js/stackblitz.js" | js.Build $esbuildOptions | resources.Copy (path.Join $targetDocsJSPath "/assets/js/stackblitz.js") }}
 <script defer src="{{ $stackblitzJs.RelPermalink }}"></script>
+
+{{- $transparencyJs := resources.Get "js/transparency.js" | js.Build $esbuildOptions | resources.Copy (path.Join $targetDocsJSPath "/assets/js/transparency.js") }}
+<script defer src="{{ $transparencyJs.RelPermalink }}"></script>
 {{- end -}}