Q:

How to use Bootstrap's bg-variant modifier

I have some buttons
<button type="button" class="myButton btn btn-primary">foo</button>
<button type="button" class="myButton btn btn-secondary">bar</button>
...

For the background colors of which I'd like to give some transparency. I'm trying like:
button.myButton {
  @include bg-variant(<???>, rgba(<button's color?>, 0.7));
}

There are some infos here and there although not much about it.
Update:
I'm getting closer... Replacing the above SCSS code by:
@include bg-variant('button.myButton', rgba($red, 0.7));

does the trick, but here I explicitly set the color to red. I'd like to make it dynamic, so use the given button's color here instead.
Update 2:
I thought I've finally found it, but this:
@each $color, $value in $theme-colors {
  @include bg-variant('button.myButton', rgba($value, 0.7));
}

makes my buttons' background just gray. Why?

A:

Solved it.
@each $color, $value in $theme-colors {
  @include bg-variant('button.myButton.btn-#{$color}", rgba($value, 0.7));
}

