Bootstrap: We need variables for alert background!

[myorangeca]

Alert is changing the theme colors automatically:

@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

This is counter intuitive and should be changed. There should be variables for Alert backgrounds. Currently you have no control over this.

[andresgalante]

Hi @myorangeca I see what you mean, that mixin is using this function:
https://github.com/twbs/bootstrap/blob/v4-dev/scss/_functions.scss#L80-L86

Which was improved recently on this PR: #24074

@mdo closed issue #23894 where you bring up the same subject. I'll leave this one open in case he wants to reconsider.

[myorangeca]

@andresgalante Thank you for leaving it open. The issue is very frustrating. Right now, I have to hack and override alert colors with !important rules. This gets very messy... we should be able to control the color level we want with variables.

Having the automated feature to produce colors with functions is definitely great, but it should be something we can turn off.

[danijelGombac]

I had also this problem and i don't need all the alert variant so i added new map:

$alert-colors: () !default;
$alert-colors: map-merge((
  "success": -10.5,
  "info": -11,
  "warning": -9.5,
  "danger": -11.5
), $alert-colors);

And change alert each:

@each $color, $value in $theme-colors {
  @if map-has-key($alert-colors, $color) {
    $value: theme-color-level($color, map-get($alert-colors, $color));
    .alert-#{$color} {
      @include alert-variant($value, $value, darken($value, 60%));
    }
  }
}

Now i can remove alert variant and change background level color.

[myorangeca]

@danijelGombac Your solution makes more sense.

[mdo]

This is counter intuitive and should be changed.

No, it's different from past approaches in Bootstrap, but it does match v4's theming system.

---

I don't know if @danijelGombac's approach is best, but I wouldn't mind seeing a demo or PR to explore it more. Alternatively, we can provide variables for the theme-color-level for each mixin parameter:

$alert-bg-level: -10 !default;
$alert-border-level: -9 !default;
$alert-color-level: 6!default;

Thoughts?

[myorangeca]

@mdo

Having a separate variable for each alert background would probably been better in my opinion. I guess having the ability to control $alert-bg-levels might be the way to go about it.