Example fixes

Remove data-bs-theme="light" from example dialog elements to rely on global theming and avoid redundant attributes. Adjust heading sizes for better visual hierarchy: reduce "What's new" from fs-3xl to fs-2xl and add fs-xl fw-bold to the "Sign up for free" title. No other functional changes.

Refine example themes, accessibility, and layout

Unify dark-theme styling and improve accessibility/layout across example pages. Replaced various text-bg-dark/nav classes with bg-black, added fg-white and data-bs-theme="dark" where appropriate, and swapped a header div for a semantic <nav> with an aria-label in the album example. Updated Chart.js to v4.5.1 and changed the dashboard search input type to "search"; adjusted border-right to border-end. Removed an outdated paragraph from the grid example and cleaned up hero/header text classes. Sidebars: made main scrollable with overflow helpers, applied bg-black and fg-white to the sidebar, simplified nav classes, added flex-fill to icon links, and updated sidebars.css to use -webkit-fill-available for height while removing explicit overflow rules.

Use fg-* color classes; tweak sidebar alignment

Replace instances of text-white/text-secondary with the fg-white/fg-secondary utility across example pages for consistent foreground color utilities. Updated: site/src/assets/examples/{cover,drawer-navbar,features,headers,sidebars}/index.astro. Also added align-items-start to sidebar <ul> elements to improve item alignment.

Author: coliff

site/src/assets/examples/album/index.astro

@@ -6,15 +6,15 @@ import Placeholder from "@shortcodes/Placeholder.astro"
 ---
 
 <header data-bs-theme="dark">
-  <div class="collapse text-bg-dark" id="navbarHeader">
+  <div class="collapse bg-black" id="navbarHeader">
     <div class="container">
       <div class="row">
         <div class="sm:col-8 md:col-7 py-4">
-          <h4>About</h4>
+          <h4 class="fg-white">About</h4>
           <p class="fg-2">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
         </div>
         <div class="sm:col-4 md:offset-1 py-4">
-          <h4>Contact</h4>
+          <h4 class="fg-white">Contact</h4>
           <ul class="list-unstyled">
             <li><a href="#" class="fg-white">Follow on X</a></li>
             <li><a href="#" class="fg-white">Like on Facebook</a></li>
@@ -24,7 +24,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
       </div>
     </div>
   </div>
-  <div class="navbar navbar-dark bg-dark shadow-sm">
+  <nav class="navbar navbar-dark bg-dark shadow-sm" aria-label="Album navigation">
     <div class="container">
       <a href="#" class="navbar-brand d-flex align-items-center">
         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="me-2" viewBox="0 0 24 24"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
@@ -34,7 +34,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
         <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
       </button>
     </div>
-  </div>
+  </nav>
 </header>
 
 <main>

site/src/assets/examples/cover/index.astro

@@ -26,6 +26,6 @@ export const body_class = 'd-flex h-100 text-center text-bg-dark'
   </main>
 
   <footer class="mt-auto fg-secondary">
-    <p>Cover template for <a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>, by <a href="https://x.com/mdo" class="text-white">@mdo</a>.</p>
+    <p>Cover template for <a href="https://getbootstrap.com/" class="fg-white">Bootstrap</a>, by <a href="https://x.com/mdo" class="fg-white">@mdo</a>.</p>
   </footer>
 </div>

site/src/assets/examples/dashboard/index.astro

@@ -2,7 +2,7 @@
 export const title = 'Dashboard Template'
 export const extra_css = ['dashboard.css']
 export const extra_js = [
-  { src: 'https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js', integrity: 'sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp'},
+  { src: 'https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.js', integrity: 'sha256-7MPNHuuMNNIXjj9Z/WPsWj2ENYwRcwrwuZWNyIbXZSo='},
   { src: 'dashboard.js'}
 ]
 ---
@@ -74,13 +74,13 @@ export const extra_js = [
   </ul>
 
   <div id="navbarSearch" class="navbar-search w-100 collapse">
-    <input class="form-control w-100 rounded-0 border-0" type="text" placeholder="Search" aria-label="Search">
+    <input class="form-control w-100 rounded-0 border-0" type="search" placeholder="Search" aria-label="Search">
   </div>
 </header>
 
 <div class="container-fluid">
   <div class="row">
-    <div class="sidebar border border-right md:col-3 lg:col-2 p-0 bg-body-tertiary">
+    <div class="sidebar border border-end md:col-3 lg:col-2 p-0 bg-body-tertiary">
       <dialog class="md:drawer drawer-end bg-body-tertiary" tabindex="-1" id="sidebarMenu" aria-labelledby="sidebarMenuLabel">
         <div class="drawer-header">
           <h5 class="drawer-title" id="sidebarMenuLabel">Company name</h5>

site/src/assets/examples/dialogs/index.astro

@@ -27,7 +27,7 @@ export const extra_css = ['dialogs.css']
 
 <!-- Modal sheet style -->
 <div class="d-flex flex-column p-4 gap-4 md:py-5 align-items-center justify-content-center">
-  <dialog class="dialog dialog-example rounded-4 shadow w-340px" open data-bs-theme="light">
+  <dialog class="dialog dialog-example rounded-4 shadow w-340px" open>
     <div class="dialog-header border-0">
       <h1 class="dialog-title">Modal title</h1>
       <button type="button" class="btn-close" aria-label="Close"></button>
@@ -46,7 +46,7 @@ export const extra_css = ['dialogs.css']
 
 <!-- Confirmation dialog -->
 <div class="d-flex flex-column p-4 gap-4 md:py-5 align-items-center justify-content-center">
-  <dialog class="dialog dialog-example rounded-4 shadow w-340px" open data-bs-theme="light">
+  <dialog class="dialog dialog-example rounded-4 shadow w-340px" open>
     <div class="dialog-body text-center py-4">
       <h5 class="fw-bold mb-2">Enable this setting?</h5>
       <p class="fg-2 mb-0">You can always change your mind in your account settings.</p>
@@ -62,9 +62,9 @@ export const extra_css = ['dialogs.css']
 
 <!-- What's new dialog -->
 <div class="d-flex flex-column p-4 gap-4 md:py-5 align-items-center justify-content-center">
-  <dialog class="dialog dialog-example rounded-4 shadow w-340px" open data-bs-theme="light">
+  <dialog class="dialog dialog-example rounded-4 shadow w-340px" open>
     <div class="dialog-header border-0 pt-4">
-      <h1 class="dialog-title fs-3xl fw-bold">What's new</h1>
+      <h1 class="dialog-title fs-2xl fw-bold">What's new</h1>
     </div>
     <div class="dialog-body">
       <ul class="list-unstyled mb-0">
@@ -101,9 +101,9 @@ export const extra_css = ['dialogs.css']
 
 <!-- Sign up dialog -->
 <div class="d-flex flex-column p-4 gap-4 md:py-5 align-items-center justify-content-center">
-  <dialog class="dialog dialog-example rounded-4 shadow w-340px" open data-bs-theme="light">
+  <dialog class="dialog dialog-example rounded-4 shadow w-340px" open>
     <div class="dialog-header border-0">
-      <h1 class="dialog-title">Sign up for free</h1>
+      <h1 class="dialog-title fs-xl fw-bold">Sign up for free</h1>
       <button type="button" class="btn-close" aria-label="Close"></button>
     </div>
     <div class="dialog-body pt-0">

site/src/assets/examples/drawer-navbar/index.astro

@@ -65,7 +65,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
 </div>
 
 <main class="container">
-  <div class="d-flex align-items-center p-3 my-3 text-white bg-purple rounded shadow-sm">
+  <div class="d-flex align-items-center p-3 my-3 fg-white bg-purple rounded shadow-sm">
     <img class="me-3" src={getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')} alt="" width="48" height="38">
     <div class="lh-1">
       <h1 class="h6 mb-0 fg-white lh-1">Bootstrap</h1>

site/src/assets/examples/features/index.astro

@@ -149,7 +149,7 @@ export const extra_css = ['features.css']
     <div class="row row-cols-1 lg:row-cols-3 align-items-stretch g-4 py-5">
       <div class="col">
         <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('unsplash-photo-1.jpg');">
-          <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
+          <div class="d-flex flex-column h-100 p-5 pb-3 fg-white text-shadow-1">
             <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Short title, long jacket</h3>
             <ul class="d-flex list-unstyled mt-auto">
               <li class="me-auto">
@@ -170,7 +170,7 @@ export const extra_css = ['features.css']
 
       <div class="col">
         <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('unsplash-photo-2.jpg');">
-          <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
+          <div class="d-flex flex-column h-100 p-5 pb-3 fg-white text-shadow-1">
             <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Much longer title that wraps to multiple lines</h3>
             <ul class="d-flex list-unstyled mt-auto">
               <li class="me-auto">

site/src/assets/examples/grid/index.astro

@@ -172,7 +172,6 @@ export const body_class = 'py-4'
     <hr class="my-4">
 
     <h2 class="mt-4">Containers</h2>
-    <p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new <code>2xl</code> breakpoint.</p>
   </div>
 
   <div class="container themed-container text-center">.container</div>

site/src/assets/examples/headers/index.astro

@@ -91,16 +91,16 @@ export const extra_css = ['headers.css']
   <header class="p-3 bg-body fg-body" data-bs-theme="dark">
     <div class="container">
       <div class="d-flex flex-wrap align-items-center justify-content-center lg:justify-content-start">
-        <a href="/" class="d-flex align-items-center mb-2 lg:mb-0 text-white text-decoration-none">
+        <a href="/" class="d-flex align-items-center mb-2 lg:mb-0 fg-white text-decoration-none">
           <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use href="#bootstrap"/></svg>
         </a>
 
         <ul class="nav col-12 lg:col-auto lg:me-auto mb-2 justify-content-center md:mb-0">
           <li><a href="#" class="nav-link px-2 fg-secondary">Home</a></li>
-          <li><a href="#" class="nav-link px-2 text-white">Features</a></li>
-          <li><a href="#" class="nav-link px-2 text-white">Pricing</a></li>
-          <li><a href="#" class="nav-link px-2 text-white">FAQs</a></li>
-          <li><a href="#" class="nav-link px-2 text-white">About</a></li>
+          <li><a href="#" class="nav-link px-2 fg-white">Features</a></li>
+          <li><a href="#" class="nav-link px-2 fg-white">Pricing</a></li>
+          <li><a href="#" class="nav-link px-2 fg-white">FAQs</a></li>
+          <li><a href="#" class="nav-link px-2 fg-white">About</a></li>
         </ul>
 
         <form class="col-12 lg:col-auto mb-3 lg:mb-0 lg:me-3" role="search">
@@ -237,7 +237,7 @@ export const extra_css = ['headers.css']
     <div class="px-3 py-2 text-bg-dark border-bottom">
       <div class="container">
         <div class="d-flex flex-wrap align-items-center justify-content-center lg:justify-content-start">
-          <a href="/" class="d-flex align-items-center my-2 lg:my-0 lg:me-auto text-white text-decoration-none">
+          <a href="/" class="d-flex align-items-center my-2 lg:my-0 lg:me-auto fg-body text-decoration-none">
             <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use href="#bootstrap"/></svg>
           </a>
 
@@ -249,25 +249,25 @@ export const extra_css = ['headers.css']
               </a>
             </li>
             <li>
-              <a href="#" class="nav-link text-white">
+              <a href="#" class="nav-link fg-white">
                 <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use href="#speedometer2"/></svg>
                 Dashboard
               </a>
             </li>
             <li>
-              <a href="#" class="nav-link text-white">
+              <a href="#" class="nav-link fg-white">
                 <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use href="#table"/></svg>
                 Orders
               </a>
             </li>
             <li>
-              <a href="#" class="nav-link text-white">
+              <a href="#" class="nav-link fg-white">
                 <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use href="#grid"/></svg>
                 Products
               </a>
             </li>
             <li>
-              <a href="#" class="nav-link text-white">
+              <a href="#" class="nav-link fg-white">
                 <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use href="#people-circle"/></svg>
                 Customers
               </a>

site/src/assets/examples/heroes/index.astro

@@ -112,11 +112,11 @@ export const extra_css = ['heroes.css']
 
   <div class="b-example-divider"></div>
 
-  <div class="bg-dark fg-secondary px-4 py-5 text-center">
+  <div class="bg-black fg-secondary px-4 py-5 text-center" data-bs-theme="dark">
     <div class="py-5">
-      <h1 class="display-5 fw-bold text-white">Dark color hero</h1>
+      <h1 class="display-5 fw-bold fg-white">Dark color hero</h1>
       <div class="lg:col-6 mx-auto">
-        <p class="fs-lg mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
+        <p class="mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
         <div class="d-grid gap-2 sm:d-flex sm:justify-content-center">
           <button type="button" class="btn-outline theme-info btn-lg px-4 sm:me-3">Custom button</button>
           <button type="button" class="btn-outline theme-secondary btn-lg px-4">Secondary</button>

site/src/assets/examples/navbar-fixed/index.astro

@@ -5,7 +5,7 @@ export const title = 'Fixed top navbar example'
 export const extra_css = ['navbar-fixed.css']
 ---
 
-<nav class="navbar md:navbar-expand navbar-dark fixed-top bg-dark">
+<nav class="navbar md:navbar-expand bg-black fixed-top" data-bs-theme="dark">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Fixed navbar</a>
     <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">