Update Alert and tweak some divider styles

scss/_alert.scss

@@ -5,39 +5,39 @@
 @use "mixins/border-radius" as *;
 
 // scss-docs-start alert-variables
+$alert-gap:                     $spacer * .75 !default;
 $alert-padding-y:               $spacer !default;
 $alert-padding-x:               $spacer !default;
-$alert-margin-bottom:           1rem !default;
 $alert-border-radius:           var(--border-radius) !default;
-$alert-link-font-weight:        $font-weight-bold !default;
+$alert-link-font-weight:        $font-weight-semibold !default;
 $alert-border-width:            var(--border-width) !default;
-$alert-dismissible-padding-r:   $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
 // scss-docs-end alert-variables
 
 @layer components {
   .alert {
     // scss-docs-start alert-css-vars
-    --alert-bg: var(--theme-bg-subtle, transparent);
+    --alert-gap: #{$alert-gap};
+    --alert-bg: var(--theme-bg-subtle, var(--bg-1));
     --alert-padding-x: #{$alert-padding-x};
     --alert-padding-y: #{$alert-padding-y};
-    --alert-margin-bottom: #{$alert-margin-bottom};
     --alert-color: var(--theme-text, inherit);
-    --alert-border-color: transparent;
-    --alert-border: #{$alert-border-width} solid var(--theme-border, var(--alert-border-color));
+    --alert-border-color: var(--theme-border, var(--border-color));
+    --alert-border: #{$alert-border-width} solid var(--alert-border-color);
     --alert-border-radius: #{$alert-border-radius};
     --alert-link-color: inherit;
+    --hr-border-color: var(--theme-border, var(--border-color));
     // scss-docs-end alert-css-vars
 
-    position: relative;
+    display: flex;
+    gap: var(--alert-gap);
+    align-items: start;
     padding: var(--alert-padding-y) var(--alert-padding-x);
-    // margin-bottom: var(--alert-margin-bottom);
     color: var(--alert-color);
     background-color: var(--alert-bg);
     border: var(--alert-border);
     @include border-radius(var(--alert-border-radius));
   }
 
-  // Headings for larger alerts
   .alert-heading {
     // Specified to prevent conflicts of changing $headings-color
     color: inherit;
@@ -48,22 +48,4 @@ $alert-dismissible-padding-r:   $alert-padding-x * 3 !default; // 3x covers widt
     font-weight: $alert-link-font-weight;
     color: var(--alert-link-color);
   }
-
-
-  // Dismissible alerts
-  //
-  // Expand the right padding and account for the close button's positioning.
-
-  .alert-dismissible {
-    padding-inline-end: $alert-dismissible-padding-r;
-
-    // Adjust close link position
-    .btn-close {
-      position: absolute;
-      inset-block-start: 0;
-      inset-inline-end: 0;
-      z-index: $stretched-link-z-index + 1;
-      padding: $alert-padding-y * 1.25 $alert-padding-x;
-    }
-  }
 }

scss/_root.scss

@@ -101,6 +101,8 @@
 
   --heading-color: #{$headings-color};
 
+  --hr-border-color: var(--border-color);
+
   --link-color: light-dark(var(--primary-base), var(--primary-text));
   --link-decoration: #{$link-decoration};
   --link-hover-color: color-mix(in oklch, var(--link-color) 90%, #000);

scss/_variables.scss

@@ -319,11 +319,6 @@ $blockquote-footer-color:     var(--gray-600) !default;
 $blockquote-footer-font-size: $small-font-size !default;
 
 $hr-margin-y:                 $spacer !default;
-$hr-color:                    inherit !default;
-
-$hr-border-color:             null !default; // Allows for inherited colors
-$hr-border-width:             var(--border-width) !default;
-$hr-opacity:                  .25 !default;
 
 // scss-docs-start vr-variables
 $vr-border-width:             var(--border-width) !default;

scss/content/_prose.scss

@@ -43,7 +43,7 @@
     hr {
       margin: calc(var(--content-gap) * 1.5) 0;
       border: 0;
-      border-block-start: 1px solid var(--border-color);
+      border-block-start: var(--border-width) solid var(--hr-border-color);
     }
 
     h1,
@@ -52,14 +52,16 @@
     h4,
     h5,
     h6 {
-      margin-top: 0;
-      margin-bottom: calc(var(--content-gap) / -2);
-      font-weight: 500;
-      line-height: 1.25;
-
-      code {
-        font-weight: 600;
-        color: inherit;
+      &:not([class]) {
+        margin-top: 0;
+        margin-bottom: calc(var(--content-gap) / -2);
+        font-weight: 500;
+        line-height: 1.25;
+
+        code {
+          font-weight: 600;
+          color: inherit;
+        }
       }
     }
 

scss/content/_reboot.scss

@@ -66,17 +66,10 @@
   }
   // scss-docs-end reboot-body-rules
 
-
-  // Content grouping
-  //
-  // 1. Reset Firefox's gray color
-
   hr {
     margin: $hr-margin-y 0;
-    color: $hr-color; // 1
     border: 0;
-    border-block-start: $hr-border-width solid $hr-border-color;
-    opacity: $hr-opacity;
+    border-block-start: var(--border-width) solid var(--hr-border-color);
   }
 
 

scss/helpers/_vr.scss

@@ -6,7 +6,6 @@
     align-self: stretch;
     width: $vr-border-width;
     min-height: 1em;
-    background-color: currentcolor;
-    opacity: $hr-opacity;
+    background-color: var(--border-color);
   }
 }

scss/tests/modules/_configuration.test.scss

@@ -1,6 +1,5 @@
 // Test @use with configuration syntax using a single module instance
 @use "../../alert" as * with (
-  $alert-margin-bottom: 3rem,
   $alert-link-font-weight: 800
 );
 @use "../../variables" as *;
@@ -13,14 +12,12 @@ $true-terminal-output: false;
       @include assert() {
         @include output() {
           .test {
-            margin-bottom: $alert-margin-bottom;
             font-weight: $alert-link-font-weight;
           }
         }
 
         @include expect() {
           .test {
-            margin-bottom: 3rem;
             font-weight: 800;
           }
         }

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

@@ -8,17 +8,25 @@ aliases:
 
 import { getData } from '@libs/data'
 
-## Examples
+## Default alert
 
-Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts JavaScript plugin](#dismissing).
+Alerts are available for any length of text, as well as an optional close button. Alerts are designed to be used with theme colors, but have neutral fallback colors for when no theme color is applied. For inline dismissal, use the [alerts JavaScript plugin](#dismiss).
+
+<Example code={`<div class="alert" role="alert">
+    A simple alert—check it out!
+  </div>`} />
+
+## Variants
+
+Use any of our variant theme classes for color mode adaptive, contextual styling.
 
 <Example code={getData('theme-colors').map((themeColor) => `<div class="alert theme-${themeColor.name}" role="alert">
     A simple ${themeColor.name} alert—check it out!
   </div>`)} />
 
 <Details name="warning-color-assistive-technologies" />
 
-### Live example
+## Live example
 
 Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button.
 
@@ -29,78 +37,41 @@ We use the following JavaScript to trigger our live alert demo:
 
 <JsDocs name="live-alert" file="site/src/assets/partials/snippets.js" />
 
-### Link color
+## Link color
 
 Use the `.alert-link` utility class to quickly provide matching colored links within any alert.
 
 <Example code={getData('theme-colors').map((themeColor) => `<div class="alert theme-${themeColor.name}" role="alert">
     A simple ${themeColor.name} alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
   </div>`)} />
 
-### Additional content
+## Additional content
 
 Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
 
 <Example code={`<div class="alert theme-success" role="alert">
-    <h4 class="alert-heading">Well done!</h4>
-    <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
-    <hr>
-    <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
+    <vstack>
+      <h4 class="alert-heading mb-2">Well done!</h4>
+      <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
+      <hr class="my-3">
+      <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
+    </vstack>
   </div>`} />
 
-### Icons
+## With icons
 
 Similarly, you can use [flexbox utilities]([[docsref:/utilities/flex]]) and [Bootstrap Icons]([[config:icons]]) to create alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.
 
 <Example code={`<div class="alert theme-primary d-flex align-items-center" role="alert">
-    <svg xmlns="http://www.w3.org/2000/svg" class="bi flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
+    <svg xmlns="http://www.w3.org/2000/svg" class="bi flex-shrink-0" viewBox="0 0 16 16" role="img" aria-label="Warning:">
       <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
     </svg>
     <div>
       An example alert with an icon
     </div>
   </div>`} />
 
-Need more than one icon for your alerts? Consider using more Bootstrap Icons and making a local SVG sprite like so to easily reference the same icons repeatedly.
-
-<Example code={`<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
-    <symbol id="check-circle-fill" viewBox="0 0 16 16">
-      <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
-    </symbol>
-    <symbol id="info-fill" viewBox="0 0 16 16">
-      <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
-    </symbol>
-    <symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
-      <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
-    </symbol>
-  </svg>
-
-  <div class="alert theme-primary d-flex align-items-center" role="alert">
-    <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Info:"><use href="#info-fill"/></svg>
-    <div>
-      An example alert with an icon
-    </div>
-  </div>
-  <div class="alert theme-success d-flex align-items-center" role="alert">
-    <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Success:"><use href="#check-circle-fill"/></svg>
-    <div>
-      An example success alert with an icon
-    </div>
-  </div>
-  <div class="alert theme-warning d-flex align-items-center" role="alert">
-    <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Warning:"><use href="#exclamation-triangle-fill"/></svg>
-    <div>
-      An example warning alert with an icon
-    </div>
-  </div>
-  <div class="alert theme-danger d-flex align-items-center" role="alert">
-    <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Danger:"><use href="#exclamation-triangle-fill"/></svg>
-    <div>
-      An example danger alert with an icon
-    </div>
-  </div>`} />
-
-### Dismissing
+## Dismiss
 
 Using the alert JavaScript plugin, it’s possible to dismiss any alert inline. Here’s how:
 
@@ -112,8 +83,8 @@ Using the alert JavaScript plugin, it’s possible to dismiss any alert inline.
 You can see this in action with a live demo:
 
 <Example code={`<div class="alert theme-warning alert-dismissible fade show" role="alert">
-    <strong>Holy guacamole!</strong> You should check in on some of those fields below.
-    <CloseButton dismiss="alert" />
+    Something’s wrong, check the fields below and try again.
+    <CloseButton dismiss="alert" class="ms-auto" />
   </div>`} />
 
 <Callout type="warning">

site/src/scss/_component-examples.scss

@@ -69,7 +69,6 @@
     display: flow-root;
     padding: var(--bd-example-padding);
     font-size: var(--font-size-base);
-    // margin: 0 ($bd-gutter-x * -.5) 1rem;
     background-color: var(--bs-bg-body);
 
     @include media-breakpoint-up(md) {

site/src/scss/_details.scss

@@ -5,7 +5,6 @@
 
 @layer custom {
   .bd-details {
-    margin-block: 1.25rem;
     font-size: var(--bs-font-size-sm);
     line-height: var(--bs-line-height-sm);
     color: var(--bs-fg-3);