We need variables for alert background!

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.

@mdo

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.

@andresgalante

@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.

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.

@danijelGombac

@danijelGombac Your solution makes more sense.

@danijelGombac

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?

@mdo

@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.

Move alert theme-color() levels to variables

merge after v4-beta3 release

Navigation Menu

Repository navigation

We need variables for alert background! #24341

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

We need variables for alert background! #24341

Description

Activity

andresgalante commented on Oct 12, 2017

myplaneticket commented on Oct 12, 2017

danijelGombac commented on Oct 12, 2017

myplaneticket commented on Oct 12, 2017

mdo commented on Oct 18, 2017

myplaneticket commented on Oct 18, 2017

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions