Fix up list group variants more

5 files changed, 35 insertions, 20 deletions

diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index 1bddeed710..9c391f07ea 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -56,7 +56,7 @@
   // Hover state
   &:hover,
   &:focus {
-    z-index: 1; // Place hover/focus items above their siblings for proper border styling
+    z-index: 2; // Place hover/focus items above their siblings for proper border styling
     color: var(--#{$prefix}list-group-action-hover-color);
     text-decoration: none;
     background-color: var(--#{$prefix}list-group-action-hover-bg);
@@ -185,15 +185,20 @@
     --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text);
     --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
     --#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
-    // --#{$prefix}list-group-action-hover-bg: #{$list-group-bg};
-  }
 
-  // $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
-  // $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
-  // @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
-  //   $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
-  // }
+    &.list-group-item-action {
+      &:hover,
+      &:focus {
+        --#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
+        --#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
+      }
 
-  // @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
+      &:active {
+        --#{$prefix}list-group-active-color: var(--#{$prefix}emphasis-color);
+        --#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text);
+        --#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text);
+      }
+    }
+  }
 }
 // scss-docs-end list-group-modifiers
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 93bf5a9b92..f01501e91e 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1540,8 +1540,10 @@ $list-group-border-radius:          var(--#{$prefix}border-radius) !default;
 
 $list-group-item-padding-y:         $spacer * .5 !default;
 $list-group-item-padding-x:         $spacer !default;
-$list-group-item-bg-scale:          -80% !default;
-$list-group-item-color-scale:       40% !default;
+// fusv-disable
+$list-group-item-bg-scale:          -80% !default; // Deprecated in v5.3.0
+$list-group-item-color-scale:       40% !default; // Deprecated in v5.3.0
+// fusv-enable
 
 $list-group-hover-bg:               var(--#{$prefix}tertiary-bg) !default;
 $list-group-active-color:           $component-active-color !default;
@@ -1552,7 +1554,7 @@ $list-group-disabled-color:         var(--#{$prefix}secondary-color) !default;
 $list-group-disabled-bg:            $list-group-bg !default;
 
 $list-group-action-color:           var(--#{$prefix}secondary-color) !default;
-$list-group-action-hover-color:     $list-group-action-color !default;
+$list-group-action-hover-color:     var(--#{$prefix}emphasis-color) !default;
 
 $list-group-action-active-color:    var(--#{$prefix}body-color) !default;
 $list-group-action-active-bg:       var(--#{$prefix}secondary-bg) !default;
diff --git a/site/content/docs/5.2/components/list-group.md b/site/content/docs/5.2/components/list-group.md
index e7b48920b9..dbe3947c90 100644
--- a/site/content/docs/5.2/components/list-group.md
+++ b/site/content/docs/5.2/components/list-group.md
@@ -154,7 +154,7 @@ Add `.list-group-horizontal` to change the layout of list group items from verti
 {{< /list-group.inline >}}
 {{< /example >}}
 
-## Contextual classes
+## Variants
 
 Use contextual classes to style list items with a stateful background and color.
 
@@ -169,7 +169,9 @@ Use contextual classes to style list items with a stateful background and color.
 </ul>
 {{< /example >}}
 
-Contextual classes also work with `.list-group-item-action`. Note the addition of the hover styles here not present in the previous example. Also supported is the `.active` state; apply it to indicate an active selection on a contextual list group item.
+### For links and buttons
+
+Contextual classes also work with `.list-group-item-action` for `<a>` and `<button>` elements. Note the addition of the hover styles here not present in the previous example. Also supported is the `.active` state; apply it to indicate an active selection on a contextual list group item.
 
 {{< example >}}
 <div class="list-group">
@@ -311,13 +313,13 @@ As part of Bootstrap's evolving CSS variables approach, list groups now use loca
 
 {{< scss-docs name="list-group-variables" file="scss/_variables.scss" >}}
 
-### Mixins
+### Sass mixins
 
 Used in combination with `$theme-colors` to generate the [contextual variant classes](#contextual-classes) for `.list-group-item`s.
 
 {{< scss-docs name="list-group-mixin" file="scss/mixins/_list-group.scss" >}}
 
-### Loop
+### Sass loop
 
 Loop that generates the modifier classes with the `list-group-item-variant()` mixin.
 
diff --git a/site/content/docs/5.2/migration.md b/site/content/docs/5.2/migration.md
index 6e1d1efd9b..65e1ef4452 100644
--- a/site/content/docs/5.2/migration.md
+++ b/site/content/docs/5.2/migration.md
@@ -15,7 +15,7 @@ toc: true
 
 Learn more by reading the new [color modes documentation]({{< docsref "/customize/color-modes" >}}).
 
-- **Global support for light (default) and dark color modes.** Set color mode globally on the `:root` element, on groups of elements and components with a wrapper class, or directly on components.
+- **Global support for light (default) and dark color modes.** Set color mode globally on the `:root` element, on groups of elements and components with a wrapper class, or directly on components, with `data-bs-theme="light|dark"`. Also included is a new `color-mode()` mixin that can output a ruleset with the `data-bs-theme` selector or a media query, depending on your preference.
 
   <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span>  Color modes replace dark variants for components, so  `.carousel-dark`, `.dropdown-menu-dark`, and `.navbar-dark` are deprecated.
 
@@ -39,12 +39,18 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz
 
 ### Components
 
-#### Alerts
+#### Alert
 
 - Alert variants are now styled via CSS variables.
 
 - <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.alert-variant()` mixin is now deprecated. We now [use the Sass loop]({{< docsref "/components/alerts#sass-loop" >}}) directly to modify the component's default CSS variables for each variant.
 
+#### List group
+
+- Alert variants are now styled via CSS variables.
+
+- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.list-group-variant()` mixin is now deprecated. We now [use the Sass loop]({{< docsref "/components/list-group#sass-loop" >}}) directly to modify the component's default CSS variables for each variant.
+
 ### Forms
 
 - Floating form labels now have a `background-color` to fix support for `<textarea>` elements. Additional changes have been made to also support disabled states and more.
diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html
index 91ceb11a7b..a71e874bba 100644
--- a/site/layouts/_default/docs.html
+++ b/site/layouts/_default/docs.html
@@ -65,13 +65,13 @@
             {{ if .Page.Params.Prev }}
               <a class="d-flex flex-column text-decoration-none text-body-emphasis" href="/docs/{{ .Site.Params.docs_version }}/{{ .Page.Params.group }}/{{ .Page.Params.Prev }}">
                 <span class="opacity-50">Previous</span>
-                <span>{{ .Page.Params.Prev | title }}</span>
+                <span class="fw-semibold">{{ .Page.Params.Prev | title }}</span>
               </a>
             {{ end }}
             {{ if .Page.Params.Next }}
               <a class="d-flex flex-column align-items-end text-decoration-none text-body-emphasis" href="/docs/{{ .Site.Params.docs_version }}/{{ .Page.Params.group }}/{{ .Page.Params.Next }}">
                 <span class="opacity-50">Next</span>
-                <span>{{ .Page.Params.Next | title }}</span>
+                <span class="fw-semibold">{{ .Page.Params.Next | title }}</span>
               </a>
             {{ end }}
           </div>