Bootstrap - Why the primary color for an alert is not the same than for a button ?

About

This page explains why the primary color for an alert is not the same than for a button in Bootstrap and how to calculate the derived alert colors.

Color System

bootstrap uses a color system based on the definition of 8 colors ¹⁾

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "light":      $light,
  "dark":       $dark,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger
);

Why the primary color for an alert is not the same than for a button ?

If you take a close look, you will find that the color used for the button takes the primary color defined earlier but not the alert.

• The color of the button takes back the primary color #0d6efd (in 5.1)

.btn-primary {
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
}

• vs the color of an alert (in 5.1)

.alert-primary {
    color: #084298;
    background-color: #cfe2ff;
    border-color: #b6d4fe;
}

The alerts colors are derived colors with the shift-color function. ²⁾

$alert-background: shift-color($value, $alert-bg-scale);
$alert-border: shift-color($value, $alert-border-scale);
$alert-color: shift-color($value, $alert-color-scale);

In the default theme, the scale is defined with the value ³⁾

$alert-bg-scale:                -80%;
$alert-border-scale:            -70%;
$alert-color-scale:             40%;

The shift-color is a wrapper and if the percentage weight is:

• positif, add white color (ie tint with the mix function)
• negative, add black color (ie shade with the mix function)

@function shift-color($color, $weight) {
  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}

// Tint a color: mix a color with white
@function tint-color($color, $weight) {
  @return mix(white, $color, $weight);
}

// Shade a color: mix a color with black
@function shade-color($color, $weight) {
  @return mix(black, $color, $weight);
}

And here we got how the color are calculated (test it at http://sass.js.org/)

• The color of the text is then 40% darker than the primary color:

mix(black,#0d6efd,40) // #084298

• The color of the background is then 80% lighter than the primary color:

mix(white,#0d6efd,80) // #cfe2ff

• The color of the border is then 70% lighter than the primary color:

mix(white,#0d6efd,70) // #b6d4fe