Should also care for hover?

Since background-color isn't actually changed on hover, and the border-color changes are fine, I don't think any hover styles are needed.

I did make a change to my pull request though:

Previous:
border-color: $card-border-color $card-border-color $card-bg;

New:
border-bottom-color: $card-bg;

Now only the bottom border colour changes, to match the card background.

Here are some screenshots of the difference the pull request makes:

Before:

After:

Note: the first tab is active, the second tab is hovered.

@mdo Indeed. Some frameworks like Laravel modify the $body-bg by default too, so it's one less thing that developers have to worry about.

There's probably a way to modify this to play nice with #background-and-color as well, but that's a seperate issue.

EDIT:
I've come up with a way to address a changing $body-bg while also playing nice with #background-and-color. It involves modifying the bg-variant mixin though, so I'm not sure how keen you guys will be on doing that for such a specific use case. Regardless here are the steps:

_card.scss:

.card-header-tabs {
  margin-right: -$card-spacer-x / 2;
  margin-bottom: -$card-spacer-y;
  margin-left: -$card-spacer-x / 2;
  border-bottom: 0;

  .nav-link {
    color: inherit;
    &:hover {
      border-color: $card-border-color $card-border-color transparent;
    }
    &.active {
      background-color: $card-bg;
      border-color: $card-border-color $card-border-color $card-bg;
      color: inherit;
    }
  }
}

_background-variant.scss:

@mixin bg-variant($parent, $color) {
  #{$parent}{
    background-color: $color !important;
    
    .card-header-tabs .nav-link.active {
      background-color: $color !important;
      border-bottom-color: $color !important;    
    }
  }
  a#{$parent},
  button#{$parent} {
    @include hover-focus {
      background-color: darken($color, 10%) !important;
    }
  }
}

The tabs will then inherit whatever colors you assign to the card:

There's likely a better way of doing this... but let me know if you'd like any of the above included in this (or in a seperate) pull-request and I'll be happy to do so.

Thoughts from @twbs/css-review for how to account for that and avoid including CSS that’s not used by default?

@shaneparsons Could you change as the follows? 😄

  .nav-link.active {
    background-color: $card-bg;
    border-bottom-color: $card-bg;
  }

to

  @if $nav-tabs-link-active-bg != $card-bg {
    .nav-link.active {
      background-color: $card-bg;
      border-bottom-color: $card-bg;
    }
  }

Done!

See my edit to #28833 (comment) and let me know if the additions are of any interest to you.

I think it's over-engineering to integrate with the background utilities. It would be better to solve it with custom variables in the future (v6?)

I think it's over-engineering to integrate with the background utilities. It would be better to solve it with custom variables in the future (v6?)

Yeah I agree on that one. I don't have a ton of experience with advanced variables / utilities / mixins, so that was just my hacky take on the solution. I more so just intended to get the conversation started.

I assume we don't want this backported, right?