Use new bg/fg utilities and data-bs-theme

Replace legacy theme classes across examples with new utility classes and theme attributes. Changes include swapping .bg-dark/.navbar-dark/.text-bg-dark/.link-body-emphasis for bg-black, bg-90, fg-white, fg-body, adding data-bs-theme="dark" where appropriate, removing nav-pills, adjusting icon nav links to use flex-column and removing svg mb-1 spacing, and simplifying sidebar nav classes. Updated example files: album, cheatsheet, headers, navbar-static, navbars, and sidebars.

Author: coliff

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

@@ -24,7 +24,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
       </div>
     </div>
   </div>
-  <nav class="navbar navbar-dark bg-dark shadow-sm" aria-label="Album navigation">
+  <nav class="navbar bg-black 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>

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

@@ -10,7 +10,7 @@ export const extra_js = [{ src: 'cheatsheet.js' }]
 export const body_class = 'bg-body-tertiary'
 ---
 
-<header class="bd-header bg-dark py-3 d-flex align-items-stretch border-bottom border-dark">
+<header class="bd-header bg-black bg-90 py-3 d-flex align-items-stretch border-bottom border-dark">
   <div class="container-fluid d-flex align-items-center">
     <h1 class="d-flex align-items-center fs-xl fg-white mb-0">
       <img src={getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')} width="38" height="30" class="me-3" alt="Bootstrap">

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

@@ -37,7 +37,7 @@ export const extra_css = ['headers.css']
         <span class="fs-xl">Simple header</span>
       </a>
 
-      <ul class="nav nav-pills">
+      <ul class="nav">
         <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li>
         <li class="nav-item"><a href="#" class="nav-link">Features</a></li>
         <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
@@ -234,7 +234,7 @@ export const extra_css = ['headers.css']
   <div class="b-example-divider"></div>
 
   <header>
-    <div class="px-3 py-2 text-bg-dark border-bottom">
+    <div class="px-3 py-2 fg-white bg-black border-bottom" 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 my-2 lg:my-0 lg:me-auto fg-body text-decoration-none">
@@ -243,32 +243,32 @@ export const extra_css = ['headers.css']
 
           <ul class="nav col-12 lg:col-auto my-2 justify-content-center md:my-0 text-small">
             <li>
-              <a href="#" class="nav-link fg-secondary">
-                <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use href="#home"/></svg>
+              <a href="#" class="nav-link fg-secondary flex-column">
+                <svg class="bi d-block mx-auto" width="24" height="24" aria-hidden="true"><use href="#home"/></svg>
                 Home
               </a>
             </li>
             <li>
-              <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>
+              <a href="#" class="nav-link fg-white flex-column">
+                <svg class="bi d-block mx-auto" width="24" height="24" aria-hidden="true"><use href="#speedometer2"/></svg>
                 Dashboard
               </a>
             </li>
             <li>
-              <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>
+              <a href="#" class="nav-link fg-white flex-column">
+                <svg class="bi d-block mx-auto" width="24" height="24" aria-hidden="true"><use href="#table"/></svg>
                 Orders
               </a>
             </li>
             <li>
-              <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>
+              <a href="#" class="nav-link fg-white flex-column">
+                <svg class="bi d-block mx-auto" width="24" height="24" aria-hidden="true"><use href="#grid"/></svg>
                 Products
               </a>
             </li>
             <li>
-              <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>
+              <a href="#" class="nav-link fg-white flex-column">
+                <svg class="bi d-block mx-auto" width="24" height="24" aria-hidden="true"><use href="#people-circle"/></svg>
                 Customers
               </a>
             </li>

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

@@ -5,7 +5,7 @@ export const title = 'Top navbar example'
 export const extra_css = ['navbar-static.css']
 ---
 
-<nav class="navbar md:navbar-expand navbar-dark bg-dark mb-4">
+<nav class="navbar md:navbar-expand bg-black bg-90 mb-4" data-bs-theme="dark">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Top 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">

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

@@ -6,7 +6,7 @@ export const extra_css = ['navbars.css']
 ---
 
 <main>
-  <nav class="navbar navbar-dark bg-dark" aria-label="First navbar example">
+  <nav class="navbar bg-black" aria-label="First navbar example" data-bs-theme="dark">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Never expand</a>
       <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
@@ -40,7 +40,7 @@ export const extra_css = ['navbars.css']
     </div>
   </nav>
 
-  <nav class="navbar navbar-expand navbar-dark bg-dark" aria-label="Second navbar example">
+  <nav class="navbar navbar-expand bg-black" aria-label="Second navbar example" data-bs-theme="dark">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Always expand</a>
       <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation">
@@ -63,7 +63,7 @@ export const extra_css = ['navbars.css']
     </div>
   </nav>
 
-  <nav class="navbar sm:navbar-expand navbar-dark bg-dark" aria-label="Third navbar example">
+  <nav class="navbar sm:navbar-expand bg-black" aria-label="Third navbar example" data-bs-theme="dark">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Expand at sm</a>
       <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
@@ -97,7 +97,7 @@ export const extra_css = ['navbars.css']
     </div>
   </nav>
 
-  <nav class="navbar md:navbar-expand navbar-dark bg-dark" aria-label="Fourth navbar example">
+  <nav class="navbar md:navbar-expand bg-black" aria-label="Fourth navbar example" data-bs-theme="dark">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Expand at md</a>
       <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
@@ -131,7 +131,7 @@ export const extra_css = ['navbars.css']
     </div>
   </nav>
 
-  <nav class="navbar lg:navbar-expand navbar-dark bg-dark" aria-label="Fifth navbar example">
+  <nav class="navbar lg:navbar-expand bg-black" aria-label="Fifth navbar example" data-bs-theme="dark">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Expand at lg</a>
       <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation">
@@ -165,7 +165,7 @@ export const extra_css = ['navbars.css']
     </div>
   </nav>
 
-  <nav class="navbar xl:navbar-expand navbar-dark bg-dark" aria-label="Sixth navbar example">
+  <nav class="navbar xl:navbar-expand bg-black" aria-label="Sixth navbar example" data-bs-theme="dark">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Expand at xl</a>
       <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation">
@@ -199,7 +199,7 @@ export const extra_css = ['navbars.css']
     </div>
   </nav>
 
-  <nav class="navbar 2xl:navbar-expand navbar-dark bg-dark" aria-label="Seventh navbar example">
+  <nav class="navbar 2xl:navbar-expand bg-black" aria-label="Seventh navbar example" data-bs-theme="dark">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Expand at 2xl</a>
       <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample2xl" aria-controls="navbarsExample2xl" aria-expanded="false" aria-label="Toggle navigation">

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

@@ -127,7 +127,7 @@ export const extra_js = [{src: 'sidebars.js'}]
     </ul>
     <hr>
     <div>
-      <a href="#" class="d-flex align-items-center link-body-emphasis text-decoration-none" data-bs-toggle="menu" aria-expanded="false">
+      <a href="#" class="d-flex align-items-center fg-body text-decoration-none" data-bs-toggle="menu" aria-expanded="false">
         <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
         <strong>mdo</strong>
       </a>
@@ -148,7 +148,7 @@ export const extra_js = [{src: 'sidebars.js'}]
       <svg class="bi pe-none" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
       <span class="visually-hidden">Icon-only</span>
     </a>
-    <ul class="nav nav-pills nav-flush flex-column mb-auto text-center">
+    <ul class="nav nav-flush flex-column mb-auto text-center">
       <li class="nav-item">
         <a href="#" class="nav-link active py-3 border-bottom rounded-0 flex-fill" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right">
           <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Home"><use href="#home"/></svg>