Merge branch 'twbs:main' into main

17 files changed, 72 insertions, 96 deletions

diff --git a/scss/_accordion.scss b/scss/_accordion.scss
index fc62ceb88..33a22f441 100644
--- a/scss/_accordion.scss
+++ b/scss/_accordion.scss
@@ -58,6 +58,7 @@
 }
 
 .accordion-item {
+  color: color-contrast($accordion-bg);
   background-color: $accordion-bg;
   border: $accordion-border-width solid $accordion-border-color;
 
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index fc72cde4d..ee4287c92 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -4,7 +4,6 @@
 
 .btn {
   display: inline-block;
-  align-self: center;
   font-family: $btn-font-family;
   font-weight: $btn-font-weight;
   line-height: $btn-line-height;
diff --git a/scss/_close.scss b/scss/_close.scss
index 32a0f68cc..a0813de8d 100644
--- a/scss/_close.scss
+++ b/scss/_close.scss
@@ -1,4 +1,4 @@
-// transparent background and border properties included for button version.
+// Transparent background and border properties included for button version.
 // iOS requires the button element instead of an anchor tag.
 // If you want the anchor version, it requires `href="#"`.
 // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
diff --git a/scss/_maps.scss b/scss/_maps.scss
new file mode 100644
index 000000000..c8b9fa7e5
--- /dev/null
+++ b/scss/_maps.scss
@@ -0,0 +1,44 @@
+// Re-assigned maps
+//
+// Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
+
+// scss-docs-start theme-colors-rgb
+$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
+// scss-docs-end theme-colors-rgb
+
+// Utilities maps
+//
+// Extends the default `$theme-colors` maps to help create our utilities.
+
+// Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
+// scss-docs-start utilities-colors
+$utilities-colors: $theme-colors-rgb !default;
+// scss-docs-end utilities-colors
+
+// scss-docs-start utilities-text-colors
+$utilities-text: map-merge(
+  $utilities-colors,
+  (
+    "black": to-rgb($black),
+    "white": to-rgb($white),
+    "body": to-rgb($body-color)
+  )
+) !default;
+$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
+// scss-docs-end utilities-text-colors
+
+// scss-docs-start utilities-bg-colors
+$utilities-bg: map-merge(
+  $utilities-colors,
+  (
+    "black": to-rgb($black),
+    "white": to-rgb($white),
+    "body": to-rgb($body-bg)
+  )
+) !default;
+$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
+// scss-docs-end utilities-bg-colors
+
+$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
+
+$gutters: $spacers !default;
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 001dfc988..f65c9b9de 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -201,12 +201,13 @@
         .offcanvas {
           position: inherit;
           bottom: 0;
-          z-index: 1000;
+          z-index: auto;
           flex-grow: 1;
           visibility: visible !important; // stylelint-disable-line declaration-no-important
           background-color: transparent;
           border-right: 0;
           border-left: 0;
+          @include box-shadow(none);
           @include transition(none);
           transform: none;
         }
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 65b98f44b..bf0eb9e25 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -49,7 +49,7 @@
 body {
   margin: 0; // 1
   font-family: var(--#{$variable-prefix}body-font-family);
-  @include font-size(var(--#{$variable-prefix}body-font-size));
+  font-size: var(--#{$variable-prefix}body-font-size);
   font-weight: var(--#{$variable-prefix}body-font-weight);
   line-height: var(--#{$variable-prefix}body-line-height);
   color: var(--#{$variable-prefix}body-color);
@@ -279,8 +279,6 @@ kbd,
 samp {
   font-family: $font-family-code;
   @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
-  direction: ltr #{"/* rtl:ignore */"};
-  unicode-bidi: bidi-override;
 }
 
 // 1. Remove browser default top margin
@@ -571,16 +569,10 @@ legend {
 }
 
 
-// Inherit font family and line height for file input buttons
-
-::file-selector-button {
-  font: inherit;
-}
-
-// 1. Change font properties to `inherit`
+// 1. Inherit font family and line height for file input buttons
 // 2. Correct the inability to style clickable types in iOS and Safari.
 
-::-webkit-file-upload-button {
+::file-selector-button {
   font: inherit; // 1
   -webkit-appearance: button; // 2
 }
diff --git a/scss/_root.scss b/scss/_root.scss
index 5e138e97b..2927c343f 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -41,7 +41,7 @@
     --#{$variable-prefix}root-font-size: #{$font-size-root};
   }
   --#{$variable-prefix}body-font-family: #{$font-family-base};
-  --#{$variable-prefix}body-font-size: #{$font-size-base};
+  @include rfs($font-size-base, --#{$variable-prefix}body-font-size);
   --#{$variable-prefix}body-font-weight: #{$font-weight-base};
   --#{$variable-prefix}body-line-height: #{$line-height-base};
   --#{$variable-prefix}body-color: #{$body-color};
diff --git a/scss/_tables.scss b/scss/_tables.scss
index e10e4c4e4..30e898b58 100644
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -3,7 +3,9 @@
 //
 
 .table {
+  --#{$variable-prefix}table-color: #{$table-color};
   --#{$variable-prefix}table-bg: #{$table-bg};
+  --#{$variable-prefix}table-border-color: #{$table-border-color};
   --#{$variable-prefix}table-accent-bg: #{$table-accent-bg};
   --#{$variable-prefix}table-striped-color: #{$table-striped-color};
   --#{$variable-prefix}table-striped-bg: #{$table-striped-bg};
@@ -14,9 +16,9 @@
 
   width: 100%;
   margin-bottom: $spacer;
-  color: $table-color;
+  color: var(--#{$variable-prefix}table-color);
   vertical-align: $table-cell-vertical-align;
-  border-color: $table-border-color;
+  border-color: var(--#{$variable-prefix}table-border-color);
 
   // Target th & td
   // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 244a15c21..f6a37b764 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -90,10 +90,6 @@ $theme-colors: (
 ) !default;
 // scss-docs-end theme-colors-map
 
-// scss-docs-start theme-colors-rgb
-$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
-// scss-docs-end theme-colors-rgb
-
 // The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
 // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
 $min-contrast-ratio:   4.5 !default;
@@ -382,8 +378,6 @@ $spacers: (
   4: $spacer * 1.5,
   5: $spacer * 3,
 ) !default;
-
-$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
 // scss-docs-end spacer-variables-maps
 
 // Position
@@ -406,39 +400,6 @@ $body-bg:                   $white !default;
 $body-color:                $gray-900 !default;
 $body-text-align:           null !default;
 
-// Utilities maps
-//
-// Extends the default `$theme-colors` maps to help create our utilities.
-
-// Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
-// scss-docs-start utilities-colors
-$utilities-colors: $theme-colors-rgb !default;
-// scss-docs-end utilities-colors
-
-// scss-docs-start utilities-text-colors
-$utilities-text: map-merge(
-  $utilities-colors,
-  (
-    "black": to-rgb($black),
-    "white": to-rgb($white),
-    "body": to-rgb($body-color)
-  )
-) !default;
-$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
-// scss-docs-end utilities-text-colors
-
-// scss-docs-start utilities-bg-colors
-$utilities-bg: map-merge(
-  $utilities-colors,
-  (
-    "black": to-rgb($black),
-    "white": to-rgb($white),
-    "body": to-rgb($body-bg)
-  )
-) !default;
-$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
-// scss-docs-end utilities-bg-colors
-
 // Links
 //
 // Style anchor elements.
@@ -504,8 +465,6 @@ $grid-columns:                12 !default;
 $grid-gutter-width:           1.5rem !default;
 $grid-row-columns:            6 !default;
 
-$gutters: $spacers !default;
-
 // Container padding
 
 $container-padding-x: $grid-gutter-width * .5 !default;
diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss
index b5f43309d..edca104af 100644
--- a/scss/bootstrap-grid.scss
+++ b/scss/bootstrap-grid.scss
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Grid v5.1.2 (https://getbootstrap.com/)
+ * Bootstrap Grid v5.1.3 (https://getbootstrap.com/)
  * Copyright 2011-2021 The Bootstrap Authors
  * Copyright 2011-2021 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -9,6 +9,7 @@ $include-column-box-sizing: true !default;
 
 @import "functions";
 @import "variables";
+@import "maps";
 
 @import "mixins/lists";
 @import "mixins/breakpoints";
diff --git a/scss/bootstrap-reboot.scss b/scss/bootstrap-reboot.scss
index ae6fb7ba1..726758e92 100644
--- a/scss/bootstrap-reboot.scss
+++ b/scss/bootstrap-reboot.scss
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Reboot v5.1.2 (https://getbootstrap.com/)
+ * Bootstrap Reboot v5.1.3 (https://getbootstrap.com/)
  * Copyright 2011-2021 The Bootstrap Authors
  * Copyright 2011-2021 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -8,6 +8,7 @@
 
 @import "functions";
 @import "variables";
+@import "maps";
 @import "mixins";
 @import "root";
 @import "reboot";
diff --git a/scss/bootstrap-utilities.scss b/scss/bootstrap-utilities.scss
index 95a42199b..6d7968e68 100644
--- a/scss/bootstrap-utilities.scss
+++ b/scss/bootstrap-utilities.scss
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Utilities v5.1.2 (https://getbootstrap.com/)
+ * Bootstrap Utilities v5.1.3 (https://getbootstrap.com/)
  * Copyright 2011-2021 The Bootstrap Authors
  * Copyright 2011-2021 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -8,6 +8,7 @@
 // Configuration
 @import "functions";
 @import "variables";
+@import "maps";
 @import "mixins";
 @import "utilities";
 
diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index e17b27475..6a5d13166 100644
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap v5.1.2 (https://getbootstrap.com/)
+ * Bootstrap v5.1.3 (https://getbootstrap.com/)
  * Copyright 2011-2021 The Bootstrap Authors
  * Copyright 2011-2021 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -9,6 +9,7 @@
 // Configuration
 @import "functions";
 @import "variables";
+@import "maps";
 @import "mixins";
 @import "utilities";
 
diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index 96423c530..51b3baa83 100644
--- a/scss/forms/_form-control.scss
+++ b/scss/forms/_form-control.scss
@@ -91,25 +91,6 @@
   &:hover:not(:disabled):not([readonly])::file-selector-button {
     background-color: $form-file-button-hover-bg;
   }
-
-  &::-webkit-file-upload-button {
-    padding: $input-padding-y $input-padding-x;
-    margin: (-$input-padding-y) (-$input-padding-x);
-    margin-inline-end: $input-padding-x;
-    color: $form-file-button-color;
-    @include gradient-bg($form-file-button-bg);
-    pointer-events: none;
-    border-color: inherit;
-    border-style: solid;
-    border-width: 0;
-    border-inline-end-width: $input-border-width;
-    border-radius: 0; // stylelint-disable-line property-disallowed-list
-    @include transition($btn-transition);
-  }
-
-  &:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
-    background-color: $form-file-button-hover-bg;
-  }
 }
 
 // Readonly controls as plain text
@@ -153,12 +134,6 @@
     margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
     margin-inline-end: $input-padding-x-sm;
   }
-
-  &::-webkit-file-upload-button {
-    padding: $input-padding-y-sm $input-padding-x-sm;
-    margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
-    margin-inline-end: $input-padding-x-sm;
-  }
 }
 
 .form-control-lg {
@@ -172,12 +147,6 @@
     margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
     margin-inline-end: $input-padding-x-lg;
   }
-
-  &::-webkit-file-upload-button {
-    padding: $input-padding-y-lg $input-padding-x-lg;
-    margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
-    margin-inline-end: $input-padding-x-lg;
-  }
 }
 
 // Make sure textareas don't shrink too much when resized
diff --git a/scss/mixins/_container.scss b/scss/mixins/_container.scss
index ee6044d0d..555304263 100644
--- a/scss/mixins/_container.scss
+++ b/scss/mixins/_container.scss
@@ -1,6 +1,8 @@
 // Container mixins
 
 @mixin make-container($gutter: $container-padding-x) {
+  --#{$variable-prefix}gutter-x: #{$gutter};
+  --#{$variable-prefix}gutter-y: 0;
   width: 100%;
   padding-right: var(--#{$variable-prefix}gutter-x, #{$gutter});
   padding-left: var(--#{$variable-prefix}gutter-x, #{$gutter});
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index aea51abaf..d6ac306b2 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -13,7 +13,7 @@
   margin-left: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
 }
 
-@mixin make-col-ready($gutter: $grid-gutter-width) {
+@mixin make-col-ready() {
   // Add box sizing if only the grid is loaded
   box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
   // Prevent columns from becoming too narrow when at smaller grid tiers by
diff --git a/scss/mixins/_table-variants.scss b/scss/mixins/_table-variants.scss
index 9fd0fb02a..cad70a19b 100644
--- a/scss/mixins/_table-variants.scss
+++ b/scss/mixins/_table-variants.scss
@@ -5,8 +5,11 @@
     $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
     $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
     $active-bg: mix($color, $background, percentage($table-active-bg-factor));
+    $border-color: mix($color, $background, percentage($table-border-factor));
 
+    --#{$variable-prefix}table-color: #{$color};
     --#{$variable-prefix}table-bg: #{$background};
+    --#{$variable-prefix}table-border-color: #{$border-color};
     --#{$variable-prefix}table-striped-bg: #{$striped-bg};
     --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
     --#{$variable-prefix}table-active-bg: #{$active-bg};
@@ -14,8 +17,8 @@
     --#{$variable-prefix}table-hover-bg: #{$hover-bg};
     --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};
 
-    color: $color;
-    border-color: mix($color, $background, percentage($table-border-factor));
+    color: var(--#{$variable-prefix}table-color);
+    border-color: var(--#{$variable-prefix}table-border-color);
   }
 }
 // scss-docs-end table-variant