Merge branch 'master' into v5-colors-shades-tints

package.json

@@ -87,21 +87,21 @@
     "popper.js": "^1.15.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.6.2",
-    "@babel/core": "^7.6.2",
+    "@babel/cli": "^7.6.4",
+    "@babel/core": "^7.6.4",
     "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
-    "@babel/preset-env": "^7.6.2",
+    "@babel/preset-env": "^7.6.3",
     "autoprefixer": "^9.6.4",
     "babel-eslint": "^10.0.3",
     "babel-plugin-istanbul": "^5.2.0",
     "bundlesize": "^0.18.0",
     "clean-css-cli": "^4.3.0",
-    "coveralls": "^3.0.6",
+    "coveralls": "^3.0.7",
     "cross-env": "^6.0.3",
     "eslint": "^6.5.1",
     "eslint-config-xo": "^0.27.1",
     "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-unicorn": "^12.0.2",
+    "eslint-plugin-unicorn": "^12.1.0",
     "find-unused-sass-variables": "^0.6.0",
     "glob": "^7.1.4",
     "hammer-simulator": "0.0.1",
@@ -117,7 +117,7 @@
     "karma-jasmine": "^2.0.1",
     "karma-jasmine-html-reporter": "^1.4.2",
     "karma-rollup-preprocessor": "^7.0.2",
-    "linkinator": "^1.5.0",
+    "linkinator": "^1.6.0",
     "node-sass": "^4.12.0",
     "nodemon": "^1.19.3",
     "npm-run-all": "^4.1.5",
@@ -131,7 +131,7 @@
     "serve": "^11.2.0",
     "shelljs": "^0.8.3",
     "shx": "^0.3.2",
-    "stylelint": "^11.0.0",
+    "stylelint": "^11.1.1",
     "stylelint-config-twbs-bootstrap": "^0.6.0",
     "terser": "^4.3.8",
     "vnu-jar": "19.9.4"

scss/_carousel.scss

@@ -188,10 +188,10 @@
 .carousel-caption {
   position: absolute;
   right: (100% - $carousel-caption-width) / 2;
-  bottom: 20px;
+  bottom: $carousel-caption-spacer;
   left: (100% - $carousel-caption-width) / 2;
-  padding-top: 20px;
-  padding-bottom: 20px;
+  padding-top: $carousel-caption-padding-y;
+  padding-bottom: $carousel-caption-padding-y;
   color: $carousel-caption-color;
   text-align: center;
 }

scss/_variables.scss

@@ -329,9 +329,6 @@ $container-padding-x: $grid-gutter-width / 2 !default;
 //
 // Define common padding and border radius sizes and more.
 
-$line-height-sm:              1.25 !default;
-$line-height-lg:              2 !default;
-
 $border-width:                1px !default;
 $border-color:                $gray-300 !default;
 
@@ -405,7 +402,10 @@ $font-weight-bold:            700 !default;
 $font-weight-bolder:          bolder !default;
 
 $font-weight-base:            $font-weight-normal !default;
+
 $line-height-base:            1.5 !default;
+$line-height-lg:              2 !default;
+$line-height-sm:              1.25 !default;
 
 $h1-font-size:                $font-size-base * 2.5 !default;
 $h2-font-size:                $font-size-base * 2 !default;
@@ -1182,6 +1182,8 @@ $carousel-indicator-transition:      opacity .6s ease !default;
 
 $carousel-caption-width:             70% !default;
 $carousel-caption-color:             $white !default;
+$carousel-caption-padding-y:         1.25rem !default;
+$carousel-caption-spacer:            1.25rem !default;
 
 $carousel-control-icon-width:        20px !default;
 

scss/mixins/_buttons.scss

@@ -3,35 +3,45 @@
 // Easily pump out default styles, as well as :hover, :focus, :active,
 // and disabled options for all buttons
 
-@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
-  color: color-yiq($background);
+@mixin button-variant(
+  $background,
+  $border,
+  $color: color-yiq($background),
+  $hover-background: darken($background, 7.5%),
+  $hover-border: darken($border, 10%),
+  $hover-color: color-yiq($hover-background),
+  $active-background: darken($background, 10%),
+  $active-border: darken($border, 12.5%),
+  $active-color: color-yiq($active-background)
+) {
+  color: $color;
   @include gradient-bg($background);
   border-color: $border;
   @include box-shadow($btn-box-shadow);
 
   &:hover {
-    color: color-yiq($hover-background);
+    color: $hover-color;
     @include gradient-bg($hover-background);
     border-color: $hover-border;
   }
 
   &:focus,
   &.focus {
-    color: color-yiq($hover-background);
+    color: $hover-color;
     @include gradient-bg($hover-background);
     border-color: $hover-border;
     // Avoid using mixin so we can pass custom focus shadow properly
     @if $enable-shadows {
-      box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
+      box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
     } @else {
-      box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
+      box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
     }
   }
 
   // Disabled comes first so active can properly restyle
   &.disabled,
   &:disabled {
-    color: color-yiq($background);
+    color: $color;
     background-color: $background;
     border-color: $border;
     // Remove CSS gradients if they're enabled
@@ -43,7 +53,7 @@
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active,
   .show > &.dropdown-toggle {
-    color: color-yiq($active-background);
+    color: $active-color;
     background-color: $active-background;
     @if $enable-gradients {
       background-image: none; // Remove the gradient for the pressed/active state
@@ -53,15 +63,21 @@
     &:focus {
       // Avoid using mixin so we can pass custom focus shadow properly
       @if $enable-shadows and $btn-active-box-shadow != none {
-        box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
+        box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
       } @else {
-        box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
+        box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
       }
     }
   }
 }
 
-@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
+@mixin button-outline-variant(
+  $color,
+  $color-hover: color-yiq($color),
+  $active-background: $color,
+  $active-border: $color,
+  $active-color: color-yiq($active-background)
+) {
   color: $color;
   border-color: $color;
 
@@ -85,7 +101,7 @@
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active,
   .show > &.dropdown-toggle {
-    color: color-yiq($active-background);
+    color: $active-color;
     background-color: $active-background;
     border-color: $active-border;
 

scss/mixins/_forms.scss

@@ -26,14 +26,16 @@
   @include deprecate("The `form-control-focus()` mixin", "v4.3.2", "v5", $ignore-warning);
 }
 
+// This mixin uses an `if()` technique to be compatible with Dart Sass
+// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
 @mixin form-validation-state-selector($state) {
   @if ($state == "valid" or $state == "invalid") {
-    .was-validated &:#{$state},
-    &.is-#{$state} {
+    .was-validated #{if(&, "&", "")}:#{$state},
+    #{if(&, "&", "")}.is-#{$state} {
       @content;
     }
   } @else {
-    &.is-#{$state} {
+    #{if(&, "&", "")}.is-#{$state} {
       @content;
     }
   }

site/content/docs/4.3/migration.md

@@ -37,6 +37,8 @@ Changes to our source Sass files and compiled CSS.
 - Dropped `color()`, `theme-color()` & `gray()` functions in favor of variables. [See #29083](https://github.com/twbs/bootstrap/pull/29083)
 - The `theme-color-level()` function is renamed to `color-level()` and now accepts any color you want instead of only `$theme-color` colors. [See #29083](https://github.com/twbs/bootstrap/pull/29083)
 - Line heights are dropped from several components to simplify our codebase. The `button-size()` and `pagination-size()` do not accept line height parameters anymore. [See #29271](https://github.com/twbs/bootstrap/pull/29271)
+- The `button-variant()` mixin now accepts 3 optional color parameters, for each button state, to override the color provided by `color-yiq()`. By default, these parameters will find which color provides more contrast against the button state's background color with `color-yiq()`.
+- The `button-outline-variant()` mixin now accepts an additional argument, `$active-color`, for setting the button's active state text color. By default, this parameter will find which color provides more contrast against the button's active background color with `color-yiq()`.
 
 ## JavaScript