color mode fixes

Author: mdo

scss/_dialog.scss

@@ -28,7 +28,8 @@ $dialog-tokens: defaults(
     --dialog-border-width: var(--border-width),
     --dialog-border-radius: var(--border-radius-lg),
     --dialog-box-shadow: var(--box-shadow-lg),
-    --dialog-backdrop-bg: rgba(0, 0, 0, .5),
+    --dialog-backdrop-bg: rgb(0 0 0 / 50%),
+    --dialog-backdrop-blur: 8px,
     --dialog-header-padding: 1rem,
     --dialog-header-border-color: var(--border-color),
     --dialog-header-border-width: var(--border-width),
@@ -80,6 +81,7 @@ $dialog-sizes: defaults(
     // Native backdrop styling via ::backdrop pseudo-element
     &::backdrop {
       background-color: var(--dialog-backdrop-bg);
+      backdrop-filter: blur(var(--dialog-backdrop-blur));
     }
 
     // Animation support using native [open] attribute

scss/_navbar.scss

@@ -19,12 +19,13 @@ $navbar-tokens: defaults(
     --navbar-color: var(--fg-2),
     --navbar-hover-color: var(--fg-1),
     --navbar-disabled-color: var(--fg-3),
-    --navbar-active-color: var(--fg),
+    --navbar-active-color: var(--fg-body),
     --navbar-brand-padding-y: .75rem,
     --navbar-brand-margin-end: 1rem,
-    --navbar-brand-font-size: var(--font-size-lg),
-    --navbar-brand-color: var(--fg),
-    --navbar-brand-hover-color: var(--fg),
+    --navbar-brand-font-size: var(--font-size-md),
+    --navbar-brand-font-weight: var(--font-weight-medium),
+    --navbar-brand-color: var(--fg-body),
+    --navbar-brand-hover-color: var(--fg-body),
     --navbar-nav-link-padding-x: .75rem,
     --navbar-toggler-width: 2rem,
     --navbar-toggler-padding-y: .25rem,
@@ -101,6 +102,7 @@ $navbar-dark-tokens: defaults(
     padding-bottom: var(--navbar-brand-padding-y);
     margin-inline-end: var(--navbar-brand-margin-end);
     font-size: var(--navbar-brand-font-size);
+    font-weight: var(--navbar-brand-font-weight);
     color: var(--navbar-brand-color);
     text-decoration: none;
     white-space: nowrap;
@@ -168,46 +170,11 @@ $navbar-dark-tokens: defaults(
   //
   // Button for toggling the navbar when in its collapsed state
 
-  .navbar-btn-icon {
+  .navbar-toggler {
     --btn-bg: transparent;
     --btn-hover-bg: var(--bg-1);
   }
 
-  // .navbar-toggler {
-  //   display: flex;
-  //   align-items: center;
-  //   justify-content: center;
-  //   width: var(--navbar-toggler-width);
-  //   aspect-ratio: 1 / 1;
-  //   // padding: var(--navbar-toggler-padding-y) var(--navbar-toggler-padding-x);
-  //   // font-size: var(--navbar-toggler-font-size);
-  //   // line-height: 1;
-  //   color: var(--navbar-color);
-  //   background-color: transparent;
-  //   border: 0;
-  //   // border: var(--border-width) solid var(--navbar-toggler-border-color);
-  //   @include border-radius(var(--navbar-toggler-border-radius));
-  //   @include transition(var(--navbar-toggler-transition));
-
-  //   &:hover {
-  //     text-decoration: none;
-  //   }
-
-  //   &:focus-visible {
-  //     text-decoration: none;
-  //     @include focus-ring(true);
-  //   }
-  // }
-
-  // Navbar toggler icon (inline SVG)
-  .navbar-toggler-icon {
-    display: inline-block;
-    width: 1rem;
-    height: 1rem;
-    color: var(--navbar-color);
-  }
-
-
   // scss-docs-start navbar-expand-loop
   // Generate series of `.navbar-expand-*` responsive classes for configuring
   // where your navbar collapses and expands. Uses container queries so the

scss/_root.scss

@@ -47,6 +47,17 @@ $root-tokens: defaults(
     --line-height-6xl: 1,
     // scss-docs-end root-font-size-variables
 
+    // scss-docs-start root-font-weight-variables
+    --font-weight-lighter: lighter,
+    --font-weight-light: 300,
+    --font-weight-normal: 400,
+    --font-weight-medium: 500,
+    --font-weight-semibold: 600,
+    --font-weight-bold: 700,
+    --font-weight-bolder: bolder,
+    // scss-docs-end root-font-weight-variables
+
+    // scss-docs-start root-body-variables
     --body-font-family: system-ui,
     --body-font-size: var(--font-size-base),
     --body-font-weight: #{$font-weight-base},
@@ -98,15 +109,16 @@ $root-tokens: defaults(
     // scss-docs-end root-focus-variables
 
     // scss-docs-start root-form-variables
-    --control-bg: var(--bg-body),
-    --control-fg: var(--fg-body),
     --control-checked-bg: var(--primary-base),
     --control-checked-border-color: var(--control-checked-bg),
     --control-active-bg: var(--primary-base),
     --control-active-border-color: var(--control-active-bg),
     --control-disabled-bg: var(--bg-3),
     --control-disabled-opacity: .65,
 
+    --btn-input-fg: var(--fg-body),
+    --btn-input-bg: var(--bg-body),
+
     --btn-input-min-height: 2.5rem,
     --btn-input-padding-y: .375rem,
     --btn-input-padding-x: .75rem,
@@ -177,3 +189,11 @@ $root-tokens: defaults(
 
   color-scheme: light dark;
 }
+
+[data-bs-theme="dark"] {
+  color-scheme: dark;
+}
+
+[data-bs-theme="light"] {
+  color-scheme: light;
+}

scss/forms/_chip-input.scss

@@ -13,8 +13,8 @@ $chip-input-tokens: defaults(
     --chip-input-padding-x: .75rem,
     --chip-input-gap: .375rem,
     --chip-input-ghost-min-width: 5rem,
-    --control-color: var(--fg-body),
-    --control-bg: var(--bg-body),
+    --control-fg: var(--btn-input-fg),
+    --control-bg: var(--btn-input-bg),
     --control-border-width: var(--border-width),
     --control-border-color: var(--border-color),
     --control-border-radius: var(--border-radius),
@@ -34,7 +34,7 @@ $chip-input-tokens: defaults(
     align-items: center;
     padding: var(--chip-input-padding-y) var(--chip-input-padding-x);
 
-    color: var(--control-color);
+    color: var(--control-fg);
     background-color: var(--control-bg);
     border: var(--control-border-width) solid var(--control-border-color);
     @include border-radius(var(--control-border-radius), 0);

scss/forms/_form-control.scss

@@ -18,8 +18,8 @@ $form-control-tokens: defaults(
     --control-padding-x: var(--btn-input-padding-x),
     --control-font-size: var(--btn-input-font-size),
     --control-line-height: var(--btn-input-line-height),
-    --control-color: var(--control-fg),
-    --control-bg: var(--control-bg),
+    --control-fg: var(--btn-input-fg),
+    --control-bg: var(--btn-input-bg),
     --control-border-width: var(--border-width),
     --control-border-color: var(--border-color),
     --control-border-radius: var(--border-radius),
@@ -30,7 +30,7 @@ $form-control-tokens: defaults(
     --control-transition-timing: .15s ease-in-out,
     --control-transition: var(--control-transition-property) var(--control-transition-timing),
     --control-placeholder-color: var(--fg-3),
-    --control-disabled-color: var(--control-color),
+    --control-disabled-color: var(--control-fg),
     --control-disabled-bg: var(--bg-2),
     --control-disabled-border-color: var(--control-border-color),
     --control-select-bg: #{escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#00000080' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>"))},
@@ -62,7 +62,7 @@ $form-control-sizes: defaults(
     padding: var(--control-padding-y) var(--control-padding-x);
     font-size: var(--control-font-size);
     line-height: var(--control-line-height);
-    color: var(--control-color);
+    color: var(--control-fg);
     appearance: none;
     background-color: var(--control-bg);
     background-clip: padding-box;
@@ -146,7 +146,7 @@ $form-control-sizes: defaults(
       padding: var(--control-padding-y) var(--control-padding-x);
       margin: calc(var(--control-padding-y) * -1) calc(var(--control-padding-x) * -1);
       margin-inline-end: var(--control-padding-x);
-      color: var(--control-color);
+      color: var(--control-fg);
       @include gradient-bg(var(--control-action-bg));
       pointer-events: none;
       border-color: inherit;
@@ -173,7 +173,7 @@ $form-control-sizes: defaults(
     padding: var(--control-padding-y) 0;
     margin-bottom: 0; // match inputs if this class comes on inputs with default margins
     line-height: var(--control-line-height);
-    color: var(--control-color);
+    color: var(--control-fg);
     background-color: transparent;
     border: solid transparent;
     border-width: var(--control-border-width) 0;

scss/forms/_labels.scss

@@ -22,7 +22,7 @@ $form-label-tokens: defaults(
     font-size: var(--label-font-size, var(--font-size-sm));
     font-style: var(--label-font-style, inherit);
     font-weight: var(--label-font-weight, inherit);
-    color: var(--label-color, inherit);
+    color: var(--label-color, var(--fg-body));
   }
 
   .form-label {

scss/helpers/_stacks.scss

@@ -26,6 +26,7 @@
     .hstack#{$infix} {
       @include container-breakpoint-up($breakpoint) {
         --stack-direction: row;
+        --stack-align-items: flex-start;
       }
     }
   }

site/src/content/docs/components/dialog.mdx

@@ -70,6 +70,28 @@ The markup for a dialog is straightforward:
 </button>
 ```
 
+## Dark dialog
+
+To make a dialog dark, add `data-bs-theme="dark"` to the `<dialog>` element.
+
+<dialog class="dialog" id="exampleDialogDark" data-bs-theme="dark">
+  <div class="dialog-header">
+    <h1 class="dialog-title">Dark dialog title</h1>
+    <CloseButton dismiss="dialog" />
+  </div>
+  <div class="dialog-body">
+    <p>This is a native dialog element, only it’s set to dark mode. It uses the browser's built-in modal behavior for accessibility and focus management.</p>
+  </div>
+  <div class="dialog-footer">
+    <button type="button" class="btn btn-solid theme-secondary" data-bs-dismiss="dialog">Close</button>
+    <button type="button" class="btn btn-solid theme-primary">Save changes</button>
+  </div>
+</dialog>
+
+<Example showMarkup={false} code={`<button type="button" class="btn btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#exampleDialogDark">
+  Open dark dialog
+</button>`} />
+
 ## Static backdrop
 
 When `backdrop` is set to `static`, the dialog will not close when clicking outside of it. Click the button below to try it.

site/src/content/docs/components/navbar.mdx

@@ -13,7 +13,7 @@ Here's a navbar that includes most supported sub-components and a responsive rig
 <ResizableExample code={`<nav class="navbar navbar-expand-md bg-1">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">Navbar</a>
-      <button class="btn btn-icon navbar-btn-icon" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvas" aria-controls="navbarOffcanvas" aria-expanded="false" aria-label="Toggle navigation">
+      <button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvas" aria-controls="navbarOffcanvas" aria-expanded="false" aria-label="Toggle navigation">
         <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>
@@ -32,7 +32,7 @@ Here's a navbar that includes most supported sub-components and a responsive rig
               <a class="nav-link" href="#">Link</a>
             </li>
             <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-container="body" aria-expanded="false">
                 Dropdown
               </a>
               <ul class="dropdown-menu">
@@ -216,7 +216,7 @@ You can also use dropdowns in your navbar. Dropdown menus require a wrapping ele
               <a class="nav-link" href="#">Pricing</a>
             </li>
             <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-container="body" aria-expanded="false">
                 Dropdown link
               </a>
               <ul class="dropdown-menu">
@@ -321,12 +321,64 @@ Mix and match with other components and utilities as needed.
     </div>
   </nav>`} />
 
+## Dark navbar
+
+To make a navbar dark, add `data-bs-theme="dark"` to the `.navbar` element.
+
+<ResizableExample code={`<nav class="navbar navbar-expand-md bg-1" data-bs-theme="dark">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="#">Dark navbar</a>
+      <button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarDarkOffcanvas" aria-controls="navbarDarkOffcanvas" aria-expanded="false" aria-label="Toggle navigation">
+        <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 class="offcanvas offcanvas-end" tabindex="-1" id="navbarDarkOffcanvas" aria-labelledby="navbarDarkOffcanvasLabel">
+        <div class="offcanvas-header">
+          <h5 class="offcanvas-title" id="navbarDarkOffcanvasLabel">Menu</h5>
+          <CloseButton dismiss="offcanvas" />
+        </div>
+        <div class="offcanvas-body mb-2 mb-md-0">
+          <ul class="nav navbar-nav me-auto">
+            <li class="nav-item">
+              <a class="nav-link active" aria-current="page" href="#">Home</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Link</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-container="body" aria-expanded="false">
+                Dropdown
+              </a>
+              <ul class="dropdown-menu">
+                <li><a class="dropdown-item" href="#">Action</a></li>
+                <li><a class="dropdown-item" href="#">Another action</a></li>
+                <li><hr class="dropdown-divider"></li>
+                <li><a class="dropdown-item" href="#">Something else here</a></li>
+              </ul>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+            </li>
+          </ul>
+          <form class="hstack gap-2" role="search">
+            <input class="form-control" type="search" placeholder="Search" aria-label="Search"/>
+            <button class="btn-solid btn-icon theme-secondary" type="submit">
+              <svg class="bi" width="16" height="16"><use href="#search" /></svg>
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </nav>`} />
+
+
 ## Color schemes
 
 Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and CSS variables. The default is our "light navbar" for use with light background colors, but you can also apply `data-bs-theme="dark"` to the `.navbar` parent for dark background colors. Then, customize with `.bg-*` and additional utilities.
 
 <ResizableExample className="d-flex flex-column gap-2" showMarkup={false} code={`
-<nav class="navbar navbar-expand-md bg-body border-bottom border-body" data-bs-theme="dark">
+<nav class="navbar navbar-expand-md" data-bs-theme="dark">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Navbar</a>
     <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">

site/src/content/docs/components/navs-tabs.mdx

@@ -39,6 +39,21 @@ Classes are used throughout, so your markup can be super flexible. Use `<ul>`s l
     <a class="nav-link disabled" aria-disabled="true">Disabled</a>
   </nav>`} />
 
+Where appropriate, you can also use `<button>` elements instead of `<a>` elements for the nav links. You can even mix and match—for example, by using buttons for dropdowns.
+
+<Example code={`<nav class="nav">
+    <a class="nav-link active" aria-current="page" href="#">Active</a>
+    <a class="nav-link" href="#">Link</a>
+    <button class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</button>
+    <ul class="dropdown-menu">
+      <li><a class="dropdown-item" href="#">Action</a></li>
+      <li><a class="dropdown-item" href="#">Another action</a></li>
+      <li><hr class="dropdown-divider"></li>
+      <li><a class="dropdown-item" href="#">Something else here</a></li>
+    </ul>
+    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+  </nav>`} />
+
 ## Available styles
 
 Change the style of `.nav`s component with modifiers and utilities. Mix and match as needed, or build your own.