@coreui/coreui 4.2.6 → 5.0.0-alpha.0

package/scss/_callout.scss

@@ -13,8 +13,8 @@
   padding: var(--#{$prefix}callout-padding-y) var(--#{$prefix}callout-padding-x);
   margin: var(--#{$prefix}callout-margin-y) var(--#{$prefix}callout-margin-x);
   border: var(--#{$prefix}callout-border-width) solid var(--#{$prefix}callout-border-color);
-  @include ltr-rtl("border-left-width", var(--#{$prefix}callout-border-left-width));
-  @include ltr-rtl("border-left-color", var(--#{$prefix}callout-border-left-color));
+  border-left-color: var(--#{$prefix}callout-border-left-color);
+  border-left-width: var(--#{$prefix}callout-border-left-width);
   @include border-radius(var(--#{$prefix}callout-border-radius));
 }
 

package/scss/_card.scss

@@ -7,6 +7,8 @@
   --#{$prefix}card-spacer-y: #{$card-spacer-y};
   --#{$prefix}card-spacer-x: #{$card-spacer-x};
   --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
+  --#{$prefix}card-title-color: #{$card-title-color};
+  --#{$prefix}card-subtitle-color: #{$card-subtitle-color};
   --#{$prefix}card-border-width: #{$card-border-width};
   --#{$prefix}card-border-color: #{$card-border-color};
   --#{$prefix}card-border-radius: #{$card-border-radius};
@@ -73,11 +75,13 @@
 
 .card-title {
   margin-bottom: var(--#{$prefix}card-title-spacer-y);
+  color: var(--#{$prefix}card-title-color);
 }
 
 .card-subtitle {
   margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
   margin-bottom: 0;
+  color: var(--#{$prefix}card-subtitle-color);
 }
 
 .card-text:last-child {
@@ -90,7 +94,7 @@
   }
 
   + .card-link {
-    @include ltr-rtl("margin-left", var(--#{$prefix}card-spacer-x));
+    margin-left: var(--#{$prefix}card-spacer-x);
   }
 }
 
@@ -193,8 +197,8 @@
       margin-bottom: 0;
 
       + .card {
-        @include ltr-rtl("margin-left", 0);
-        @include ltr-rtl("border-left", 0);
+        margin-left: 0;
+        border-left: 0;
       }
 
       // Handle rounded corners

package/scss/_carousel.scss

@@ -96,7 +96,7 @@
   justify-content: center; // 3. horizontally center contents
   width: $carousel-control-width;
   padding: 0;
-  color: var(--#{$prefix}carousel-control-color, $carousel-control-color);
+  color: $carousel-control-color;
   text-align: center;
   background: none;
   border: 0;
@@ -106,7 +106,7 @@
   // Hover/focus state
   &:hover,
   &:focus {
-    color: var(--#{$prefix}carousel-control-color, $carousel-control-color);
+    color: $carousel-control-color;
     text-decoration: none;
     outline: 0;
     opacity: $carousel-control-hover-opacity;
@@ -177,7 +177,7 @@
     margin-left: $carousel-indicator-spacer;
     text-indent: -999px;
     cursor: pointer;
-    background-color: var(--#{$prefix}carousel-indicator-active-bg, $carousel-indicator-active-bg);
+    background-color: $carousel-indicator-active-bg;
     background-clip: padding-box;
     border: 0;
     // Use transparent borders to increase the hit area by 10px on top and bottom.
@@ -204,15 +204,13 @@
   left: (100% - $carousel-caption-width) * .5;
   padding-top: $carousel-caption-padding-y;
   padding-bottom: $carousel-caption-padding-y;
-  color: var(--#{$prefix}carousel-caption-color, $carousel-caption-color);
+  color: $carousel-caption-color;
   text-align: center;
 }
 
 // Dark mode carousel
 
-.carousel-dark {
-  --#{$prefix}carousel-indicator-active-bg: #{$carousel-dark-indicator-active-bg};
-  --#{$prefix}carousel-caption-color: #{$carousel-dark-caption-color};
+@mixin carousel-dark() {
   .carousel-control-prev-icon,
   .carousel-control-next-icon {
     filter: $carousel-dark-control-icon-filter;
@@ -226,3 +224,15 @@
     color: $carousel-dark-caption-color;
   }
 }
+
+.carousel-dark {
+  @include carousel-dark();
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .carousel {
+      @include carousel-dark();
+    }
+  }
+}

package/scss/_close.scss

@@ -4,37 +4,58 @@
 // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
 
 .btn-close {
+  --#{$prefix}btn-close-color: #{$btn-close-color};
+  --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
+  --#{$prefix}btn-close-opacity: #{$btn-close-opacity};
+  --#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity};
+  --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
+  --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
+  --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
+  --#{$prefix}btn-close-white-filter: #{$btn-close-white-filter};
+
   box-sizing: content-box;
   width: $btn-close-width;
   height: $btn-close-height;
   padding: $btn-close-padding-y $btn-close-padding-x;
-  color: var(--#{$prefix}btn-close-color, $btn-close-color);
-  background: transparent var(--#{$prefix}btn-close-bg, escape-svg($btn-close-bg)) center / $btn-close-width auto no-repeat; // include transparent for button elements
+  color: var(--#{$prefix}btn-close-color);
+  background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
   border: 0; // for button elements
   @include border-radius();
-  opacity: $btn-close-opacity;
+  opacity: var(--#{$prefix}btn-close-opacity);
 
   // Override <a>'s hover style
   &:hover {
-    color: var(--#{$prefix}btn-close-color, $btn-close-color);
+    color: var(--#{$prefix}btn-close-color);
     text-decoration: none;
-    opacity: $btn-close-hover-opacity;
+    opacity: var(--#{$prefix}btn-close-hover-opacity);
   }
 
   &:focus {
     outline: 0;
-    box-shadow: $btn-close-focus-shadow;
-    opacity: $btn-close-focus-opacity;
+    box-shadow: var(--#{$prefix}btn-close-focus-shadow);
+    opacity: var(--#{$prefix}btn-close-focus-opacity);
   }
 
   &:disabled,
   &.disabled {
     pointer-events: none;
     user-select: none;
-    opacity: $btn-close-disabled-opacity;
+    opacity: var(--#{$prefix}btn-close-disabled-opacity);
   }
 }
 
+@mixin btn-close-white() {
+  filter: var(--#{$prefix}btn-close-white-filter);
+}
+
 .btn-close-white {
-  filter: $btn-close-white-filter;
+  @include btn-close-white();
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .btn-close {
+      @include btn-close-white();
+    }
+  }
 }

package/scss/_dropdown.scss

@@ -64,7 +64,7 @@
 
   &[data-coreui-popper] {
     top: 100%;
-    @include ltr-rtl("left", 0);
+    left: 0;
     margin-top: var(--#{$prefix}dropdown-spacer);
   }
 
@@ -82,7 +82,7 @@
 }
 
 // scss-docs-start responsive-breakpoints
-// We deliberately hardcode the `cui-` prefix because we check
+// We deliberately hardcode the `bs-` prefix because we check
 // this custom property in JS to determine Popper's positioning
 
 @each $breakpoint in map-keys($grid-breakpoints) {
@@ -128,10 +128,10 @@
 .dropend {
   .dropdown-menu[data-coreui-popper] {
     top: 0;
-    @include ltr-rtl("right", auto);
-    @include ltr-rtl("left", 100%);
+    right: auto;
+    left: 100%;
     margin-top: 0;
-    @include ltr-rtl("margin-left", var(--#{$prefix}dropdown-spacer));
+    margin-left: var(--#{$prefix}dropdown-spacer);
   }
 
   .dropdown-toggle {
@@ -145,11 +145,10 @@
 .dropstart {
   .dropdown-menu[data-coreui-popper] {
     top: 0;
-
-    @include ltr-rtl("right", 100%);
-    @include ltr-rtl("left", auto);
+    right: 100%;
+    left: auto;
     margin-top: 0;
-    @include ltr-rtl("margin-right", var(--#{$prefix}dropdown-spacer));
+    margin-right: var(--#{$prefix}dropdown-spacer);
   }
 
   .dropdown-toggle {
@@ -185,6 +184,7 @@
   white-space: nowrap; // prevent links from randomly breaking onto new lines
   background-color: transparent; // For `<button>`s
   border: 0; // For `<button>`s
+  @include border-radius(var(--#{$prefix}dropdown-item-border-radius, 0));
 
   &:hover,
   &:focus {

package/scss/_functions.scss

@@ -188,7 +188,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
   );
 
   @each $name, $value in $rgb {
-    $value: if(divide($value, 255) < .03928, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
+    $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
     $rgb: map-merge($rgb, ($name: $value));
   }
 
@@ -218,86 +218,6 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
 }
 // scss-docs-end color-functions
 
-// scss-docs-start alert-color-functions
-@function alert-color-map($color) {
-  @return (
-    "alert-bg": shift-color($color, $alert-bg-scale),
-    "alert-border": shift-color($color, $alert-border-scale),
-    "alert-color": shift-color($color, $alert-color-scale),
-    "base-color": $color
-  );
-}
-// scss-docs-end alert-color-functions
-
-// scss-docs-start button-color-functions
-@function btn-color($color, $shade, $tint) {
-  @return if(color-contrast($color) == $color-contrast-light, shade-color($color, $shade), tint-color($color, $tint));
-}
-
-@function btn-color-map($background, $border-color) {
-  @return (
-    "bg": $background,
-    "border-color": $border-color,
-    "color": color-contrast($background),
-    "hover-bg": btn-color($background, $btn-hover-bg-shade-amount, $btn-hover-bg-tint-amount),
-    "hover-border-color": btn-color($border-color, $btn-hover-border-shade-amount, $btn-hover-border-tint-amount),
-    "hover-color": color-contrast(btn-color($background, $btn-hover-bg-shade-amount, $btn-hover-bg-tint-amount)),
-    "active-bg": btn-color($background, $btn-active-bg-shade-amount, $btn-active-bg-tint-amount),
-    "active-border-color": btn-color($border-color, $btn-active-border-shade-amount, $btn-active-border-tint-amount),
-    "active-color": color-contrast(btn-color($border-color, $btn-active-border-shade-amount, $btn-active-border-tint-amount)),
-    "disabled-bg": $background,
-    "disabled-border-color": $border-color,
-    "disabled-color": color-contrast($background),
-    "shadow": rgba(mix($background, $border-color, 15%), .5)
-  );
-}
-
-@function btn-outline-color-map($background) {
-  @return (
-    "color": $background,
-    "hover-bg": btn-color($background, $btn-hover-bg-shade-amount, $btn-hover-bg-tint-amount),
-    "hover-border-color": btn-color($background, $btn-hover-border-shade-amount, $btn-hover-border-tint-amount),
-    "hover-color": color-contrast(btn-color($background, $btn-hover-bg-shade-amount, $btn-hover-bg-tint-amount)),
-    "active-bg": btn-color($background, $btn-active-bg-shade-amount, $btn-active-bg-tint-amount),
-    "active-border-color": btn-color($background, $btn-active-border-shade-amount, $btn-active-border-tint-amount),
-    "active-color": color-contrast(btn-color($background, $btn-active-border-shade-amount, $btn-active-border-tint-amount)),
-    "disabled-color": $background,
-    "shadow": rgba(mix($background, $background, 15%), .5)
-  );
-}
-// scss-docs-end button-color-functions
-
-// scss-docs-start list-group-color-functions
-@function list-group-color-map($color) {
-  @return (
-    "bg": shift-color($color, $list-group-item-bg-scale),
-    "bg-hover": shade-color($color, 10%),
-    "color": shift-color($color, $list-group-item-color-scale)
-  );
-}
-// scss-docs-end list-group-color-functions
-
-// scss-docs-start table-color-functions
-@function table-color-map($background, $body-bg: $body-bg) {
-  $color: color-contrast(opaque($body-bg, $background));
-  $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
-  $active-bg: mix($color, $background, percentage($table-active-bg-factor));
-  $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
-
-  @return (
-    "bg": $background,
-    "color": $color,
-    "border-color": mix($color, $background, percentage($table-border-factor)),
-    "striped-bg": $striped-bg,
-    "striped-color": color-contrast($striped-bg),
-    "active-bg": $active-bg,
-    "active-color": color-contrast($active-bg),
-    "hover-bg": $hover-bg,
-    "hover-color": color-contrast($hover-bg)
-  );
-}
-// scss-docs-end table-color-functions
-
 // Return valid calc
 @function add($value1, $value2, $return-calc: true) {
   @if $value1 == null {
@@ -380,3 +300,8 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
   }
   @return $result;
 }
+
+// Generate selectors for theme variants
+@function theme-prefix($theme, $selector) {
+  @return #{"[data-coreui-theme="$theme + "] ." + $theme + "\\:" + $selector + ", [data-coreui-theme="$theme + "] ." + $theme + "\\:" + $selector + ":not([class*='#{$theme}:'])"};
+}

package/scss/_images.scss

@@ -13,8 +13,8 @@
 // Image thumbnails
 .img-thumbnail {
   padding: $thumbnail-padding;
-  background-color: var(--#{$prefix}thumbnail-bg, $thumbnail-bg);
-  border: $thumbnail-border-width solid var(--#{$prefix}thumbnail-border-color, $thumbnail-border-color);
+  background-color: $thumbnail-bg;
+  border: $thumbnail-border-width solid $thumbnail-border-color;
   @include border-radius($thumbnail-border-radius);
   @include box-shadow($thumbnail-box-shadow);
 
@@ -38,5 +38,5 @@
 
 .figure-caption {
   @include font-size($figure-caption-font-size);
-  color: var(--#{$prefix}figure-caption-color, $figure-caption-color);
+  color: $figure-caption-color;
 }

package/scss/_list-group.scss

@@ -27,7 +27,7 @@
   flex-direction: column;
 
   // No need to set list-style: none; since .list-group-item is block level
-  @include ltr-rtl("padding-left", 0); // reset padding because ul and ol
+  padding-left: 0; // reset padding because ul and ol
   margin-bottom: 0;
   @include border-radius(var(--#{$prefix}list-group-border-radius));
 }
@@ -143,11 +143,11 @@
 
         + .list-group-item {
           border-top-width: var(--#{$prefix}list-group-border-width);
-          @include ltr-rtl("border-left-width", 0);
+          border-left-width: 0;
 
           &.active {
-            @include ltr-rtl("margin-left", calc(-1 * var(--#{$prefix}list-group-border-width)));
-            @include ltr-rtl("border-left-width", var(--#{$prefix}list-group-border-width));
+            margin-left: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
+            border-left-width: var(--#{$prefix}list-group-border-width);
           }
         }
       }
@@ -180,9 +180,25 @@
 // Add modifier classes to change text and background color on individual items.
 // Organizationally, this must come after the `:hover` states.
 
-@each $state, $variant in $list-group-variants {
+@each $state in map-keys($theme-colors) {
   .list-group-item-#{$state} {
-    @include list-group-item-variant($state, $variant);
+    --#{$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);
+
+    &.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);
+      }
+
+      &: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

package/scss/_maps.scss

@@ -6,6 +6,43 @@
 $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
 // scss-docs-end theme-colors-rgb
 
+// scss-docs-start theme-colors-dark-rgb
+$theme-colors-dark-rgb: map-loop($theme-colors-dark, to-rgb, "$value") !default;
+// scss-docs-end theme-colors-dark-rgb
+
+$theme-colors-text: (
+  "primary": $primary-text,
+  "secondary": $secondary-text,
+  "success": $success-text,
+  "info": $info-text,
+  "warning": $warning-text,
+  "danger": $danger-text,
+  "light": $light-text,
+  "dark": $dark-text,
+) !default;
+
+$theme-colors-bg-subtle: (
+  "primary": $primary-bg-subtle,
+  "secondary": $secondary-bg-subtle,
+  "success": $success-bg-subtle,
+  "info": $info-bg-subtle,
+  "warning": $warning-bg-subtle,
+  "danger": $danger-bg-subtle,
+  "light": $light-bg-subtle,
+  "dark": $dark-bg-subtle,
+) !default;
+
+$theme-colors-border-subtle: (
+  "primary": $primary-border-subtle,
+  "secondary": $secondary-border-subtle,
+  "success": $success-border-subtle,
+  "info": $info-border-subtle,
+  "warning": $warning-border-subtle,
+  "danger": $danger-border-subtle,
+  "light": $light-border-subtle,
+  "dark": $dark-border-subtle,
+) !default;
+
 // Utilities maps
 //
 // Extends the default `$theme-colors` maps to help create our utilities.
@@ -25,6 +62,17 @@ $utilities-text: map-merge(
   )
 ) !default;
 $utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
+
+$utilities-text-emphasis-colors: (
+  "primary-emphasis": var(--#{$prefix}primary-text),
+  "secondary-emphasis": var(--#{$prefix}secondary-text),
+  "success-emphasis": var(--#{$prefix}success-text),
+  "info-emphasis": var(--#{$prefix}info-text),
+  "warning-emphasis": var(--#{$prefix}warning-text),
+  "danger-emphasis": var(--#{$prefix}danger-text),
+  "light-emphasis": var(--#{$prefix}light-text),
+  "dark-emphasis": var(--#{$prefix}dark-text)
+) !default;
 // scss-docs-end utilities-text-colors
 
 // scss-docs-start utilities-bg-colors
@@ -37,6 +85,18 @@ $utilities-bg: map-merge(
   )
 ) !default;
 $utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
+
+$utilities-bg-subtle: (
+  "primary-subtle": var(--#{$prefix}primary-bg-subtle),
+  "secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
+  "success-subtle": var(--#{$prefix}success-bg-subtle),
+  "info-subtle": var(--#{$prefix}info-bg-subtle),
+  "warning-subtle": var(--#{$prefix}warning-bg-subtle),
+  "danger-subtle": var(--#{$prefix}danger-bg-subtle),
+  "light-subtle": var(--#{$prefix}light-bg-subtle),
+  "dark-subtle": var(--#{$prefix}dark-bg-subtle)
+) !default;
+// $utilities-bg-subtle-colors: map-loop($utilities-bg-subtle, rgba-css-var, "$key", "bg") !default;
 // scss-docs-end utilities-bg-colors
 
 // scss-docs-start utilities-border-colors
@@ -47,6 +107,17 @@ $utilities-border: map-merge(
   )
 ) !default;
 $utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
+
+$utilities-border-subtle: (
+  "primary-subtle": var(--#{$prefix}primary-border-subtle),
+  "secondary-subtle": var(--#{$prefix}secondary-border-subtle),
+  "success-subtle": var(--#{$prefix}success-border-subtle),
+  "info-subtle": var(--#{$prefix}info-border-subtle),
+  "warning-subtle": var(--#{$prefix}warning-border-subtle),
+  "danger-subtle": var(--#{$prefix}danger-border-subtle),
+  "light-subtle": var(--#{$prefix}light-border-subtle),
+  "dark-subtle": var(--#{$prefix}dark-border-subtle)
+) !default;
 // scss-docs-end utilities-border-colors
 
 $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;

package/scss/_mixins.scss

@@ -2,9 +2,6 @@
 //
 // Used in conjunction with global variables to enable certain theme features.
 
-// LTR & RTL
-@import "mixins/ltr-rtl";
-
 // Vendor
 @import "vendor/rfs";
 
@@ -13,6 +10,7 @@
 
 // Helpers
 @import "mixins/breakpoints";
+@import "mixins/color-mode";
 @import "mixins/color-scheme";
 @import "mixins/image";
 @import "mixins/resize";
@@ -24,17 +22,13 @@
 @import "mixins/utilities";
 
 // Components
-@import "mixins/alert";
-@import "mixins/avatar";
 @import "mixins/backdrop";
 @import "mixins/buttons";
 @import "mixins/caret";
 @import "mixins/pagination";
 @import "mixins/lists";
-@import "mixins/list-group";
 @import "mixins/forms";
 @import "mixins/table-variants";
-@import "mixins/icon";
 
 // Skins
 @import "mixins/border-radius";
@@ -47,5 +41,6 @@
 @import "mixins/container";
 @import "mixins/grid";
 
-// CSS Variables
-@import "mixins/css-vars";
+// CoreUI Components
+@import "mixins/avatar";
+@import "mixins/icon";

package/scss/_modal.scss

@@ -34,7 +34,7 @@
 
   position: fixed;
   top: 0;
-  @include ltr-rtl("left", 0);
+  left: 0;
   z-index: var(--#{$prefix}modal-zindex);
   display: none;
   width: 100%;
@@ -133,7 +133,7 @@
 
   .btn-close {
     padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5);
-    @include ltr-rtl-value-only("margin", calc(-.5 * var(--#{$prefix}modal-header-padding-y)) calc(-.5 * var(--#{$prefix}modal-header-padding-x)) calc(-.5 * var(--#{$prefix}modal-header-padding-y)) auto, calc(-.5 * var(--#{$prefix}modal-header-padding-y)) auto calc(-.5 * var(--#{$prefix}modal-header-padding-y)) calc(-.5 * var(--#{$prefix}modal-header-padding-x)));
+    margin: calc(-.5 * var(--#{$prefix}modal-header-padding-y)) calc(-.5 * var(--#{$prefix}modal-header-padding-x)) calc(-.5 * var(--#{$prefix}modal-header-padding-y)) auto;
   }
 }
 

package/scss/_nav.scss

@@ -16,7 +16,7 @@
 
   display: flex;
   flex-wrap: wrap;
-  @include ltr-rtl("padding-left", 0);
+  padding-left: 0;
   margin-bottom: 0;
   list-style: none;
 }
@@ -28,6 +28,8 @@
   font-weight: var(--#{$prefix}nav-link-font-weight);
   color: var(--#{$prefix}nav-link-color);
   text-decoration: if($link-decoration == none, null, none);
+  background: none;
+  border: 0;
   @include transition($nav-link-transition);
 
   &:hover,
@@ -63,7 +65,6 @@
 
   .nav-link {
     margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
-    background: none;
     border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
     @include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
 
@@ -110,8 +111,6 @@
   // scss-docs-end nav-pills-css-vars
 
   .nav-link {
-    background: none;
-    border: 0;
     @include border-radius(var(--#{$prefix}nav-pills-border-radius));
 
     &:disabled {
@@ -129,6 +128,44 @@
 }
 
 
+//
+// Underline
+//
+
+.nav-underline {
+  // scss-docs-start nav-underline-css-vars
+  --#{$prefix}nav-underline-gap: #{$nav-underline-gap};
+  --#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
+  --#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};
+  // scss-docs-end nav-underline-css-vars
+
+  gap: var(--#{$prefix}nav-underline-gap);
+
+  // .nav-item + .nav-item,
+  // .nav-link + .nav-link {
+  //   margin-left: $nav-link-padding-x;
+  // }
+
+  .nav-link {
+    padding-right: 0;
+    padding-left: 0;
+    border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent;
+
+    &:hover,
+    &:focus {
+      border-bottom-color: currentcolor;
+    }
+  }
+
+  .nav-link.active,
+  .show > .nav-link {
+    font-weight: $font-weight-bold;
+    color: var(--#{$prefix}nav-underline-link-active-color);
+    border-bottom-color: currentcolor;
+  }
+}
+
+
 //
 // Justified variants
 //