Revamp some examples, update navbars to have fallback values for easier color modes...

diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 10842fd460f2242c0f47cd66c550a881d41ab4a3..2296f124693aabaa3943ebe991c02f0fb9eef245 100644 (file)
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -96,7 +96,8 @@ $navbar-nav-tokens: defaults(
     justify-content: space-between;
     padding: var(--navbar-padding-y) var(--navbar-padding-x);
     @include set-container();
-    @include gradient-bg();
+    color: var(--navbar-color, var(--fg-body));
+    @include gradient-bg(var(--navbar-bg, var(--bg-body)));
 
     // Container properties for nested containers
     %container-flex-properties {

diff --git a/site/src/content/docs/components/navbar.mdx b/site/src/content/docs/components/navbar.mdx
index 7ba554933c9d963de0df1b1829c5366233e038ba..40bad71b3790d69a16f21d12f72d1b0280c79bbf 100644 (file)
--- a/site/src/content/docs/components/navbar.mdx
+++ b/site/src/content/docs/components/navbar.mdx
@@ -484,7 +484,7 @@ Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and
 `} />
 
 ```html
-<nav class="navbar bg-body border-bottom border-body" data-bs-theme="dark">
+<nav class="navbar" data-bs-theme="dark">
   <!-- Navbar content -->
 </nav>
 
@@ -492,7 +492,7 @@ Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and
   <!-- Navbar content -->
 </nav>
 
-<nav class="navbar" style="background-color: #e3f2fd;" data-bs-theme="light">
+<nav class="navbar bg-1" data-bs-theme="light">
   <!-- Navbar content -->
 </nav>
 ```

diff --git a/site/src/scss/_navbar.scss b/site/src/scss/_navbar.scss
index 92fdabe0f9b78ca7398238e977f4c64ad264a594..d48e3abf14f569df9890c2f2162eb80041e7e247 100644 (file)
--- a/site/src/scss/_navbar.scss
+++ b/site/src/scss/_navbar.scss
@@ -13,8 +13,9 @@
   }
 
   .bd-navbar {
+    --bs-navbar-padding-x: 0;
+    --bs-navbar-padding-y: .75rem;
     --bs-border-color: color-mix(in oklch, var(--bs-fg-body) 12%, transparent);
-    padding: .75rem 0;
     margin-bottom: -1px;
     background-clip: padding-box;