rake update[v5.0.0-alpha2]

38 files changed, 344 insertions, 190 deletions

diff --git a/assets/stylesheets/_bootstrap-grid.scss b/assets/stylesheets/_bootstrap-grid.scss
index 323df71..64ae965 100644
--- a/assets/stylesheets/_bootstrap-grid.scss
+++ b/assets/stylesheets/_bootstrap-grid.scss
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Grid v5.0.0-alpha1 (https://getbootstrap.com/)
+ * Bootstrap Grid v5.0.0-alpha2 (https://getbootstrap.com/)
  * Copyright 2011-2020 The Bootstrap Authors
  * Copyright 2011-2020 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -32,7 +32,7 @@ $utilities: map-get-multiple(
     "bootstrap/flex",
     "bootstrap/flex-direction",
     "bootstrap/flex-grow",
-    "bootstrap/flex-shrink"
+    "bootstrap/flex-shrink",
     "bootstrap/flex-wrap",
     "bootstrap/justify-content",
     "bootstrap/align-items",
diff --git a/assets/stylesheets/_bootstrap-reboot.scss b/assets/stylesheets/_bootstrap-reboot.scss
index 36ac1ad..fded39c 100644
--- a/assets/stylesheets/_bootstrap-reboot.scss
+++ b/assets/stylesheets/_bootstrap-reboot.scss
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Reboot v5.0.0-alpha1 (https://getbootstrap.com/)
+ * Bootstrap Reboot v5.0.0-alpha2 (https://getbootstrap.com/)
  * Copyright 2011-2020 The Bootstrap Authors
  * Copyright 2011-2020 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
diff --git a/assets/stylesheets/_bootstrap.scss b/assets/stylesheets/_bootstrap.scss
index 1d706bc..beb028d 100644
--- a/assets/stylesheets/_bootstrap.scss
+++ b/assets/stylesheets/_bootstrap.scss
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap v5.0.0-alpha1 (https://getbootstrap.com/)
+ * Bootstrap v5.0.0-alpha2 (https://getbootstrap.com/)
  * Copyright 2011-2020 The Bootstrap Authors
  * Copyright 2011-2020 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
diff --git a/assets/stylesheets/bootstrap/_alert.scss b/assets/stylesheets/bootstrap/_alert.scss
index 19157b2..d0536f3 100644
--- a/assets/stylesheets/bootstrap/_alert.scss
+++ b/assets/stylesheets/bootstrap/_alert.scss
@@ -27,15 +27,14 @@
 // Expand the right padding and account for the close button's positioning.
 
 .alert-dismissible {
-  padding-right: $close-font-size + $alert-padding-x * 2;
+  padding-right: $alert-dismissible-padding-r;
 
   // Adjust close link position
-  .close {
+  .btn-close {
     position: absolute;
     top: 0;
     right: 0;
-    padding: $alert-padding-y $alert-padding-x;
-    color: inherit;
+    padding: $alert-padding-y * 1.25 $alert-padding-x;
   }
 }
 
diff --git a/assets/stylesheets/bootstrap/_card.scss b/assets/stylesheets/bootstrap/_card.scss
index 697fe51..a526ec1 100644
--- a/assets/stylesheets/bootstrap/_card.scss
+++ b/assets/stylesheets/bootstrap/_card.scss
@@ -185,12 +185,12 @@
 
           .card-img-top,
           .card-header {
-            // stylelint-disable-next-line property-blacklist
+            // stylelint-disable-next-line property-disallowed-list
             border-top-right-radius: 0;
           }
           .card-img-bottom,
           .card-footer {
-            // stylelint-disable-next-line property-blacklist
+            // stylelint-disable-next-line property-disallowed-list
             border-bottom-right-radius: 0;
           }
         }
@@ -200,12 +200,12 @@
 
           .card-img-top,
           .card-header {
-            // stylelint-disable-next-line property-blacklist
+            // stylelint-disable-next-line property-disallowed-list
             border-top-left-radius: 0;
           }
           .card-img-bottom,
           .card-footer {
-            // stylelint-disable-next-line property-blacklist
+            // stylelint-disable-next-line property-disallowed-list
             border-bottom-left-radius: 0;
           }
         }
@@ -220,6 +220,8 @@
 //
 
 .accordion {
+  overflow-anchor: none;
+
   > .card {
     overflow: hidden;
 
diff --git a/assets/stylesheets/bootstrap/_carousel.scss b/assets/stylesheets/bootstrap/_carousel.scss
index 84ffd6c..ef77cbb 100644
--- a/assets/stylesheets/bootstrap/_carousel.scss
+++ b/assets/stylesheets/bootstrap/_carousel.scss
@@ -193,3 +193,20 @@
   color: $carousel-caption-color;
   text-align: center;
 }
+
+// Dark mode carousel
+
+.carousel-dark {
+  .carousel-control-prev-icon,
+  .carousel-control-next-icon {
+    filter: $carousel-dark-control-icon-filter;
+  }
+
+  .carousel-indicators li {
+    background-color: $carousel-dark-indicator-active-bg;
+  }
+
+  .carousel-caption {
+    color: $carousel-dark-caption-color;
+  }
+}
diff --git a/assets/stylesheets/bootstrap/_close.scss b/assets/stylesheets/bootstrap/_close.scss
index dd6541e..fd1971d 100644
--- a/assets/stylesheets/bootstrap/_close.scss
+++ b/assets/stylesheets/bootstrap/_close.scss
@@ -1,36 +1,41 @@
-.close {
-  @include font-size($close-font-size);
-  font-weight: $close-font-weight;
-  line-height: 1;
-  color: $close-color;
-  text-shadow: $close-text-shadow;
-  opacity: .5;
+// 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
+
+.btn-close {
+  box-sizing: content-box;
+  width: $btn-close-width;
+  height: $btn-close-height;
+  padding: $btn-close-padding-y $btn-close-padding-x;
+  color: $btn-close-color;
+  background: transparent escape-svg($btn-close-bg) no-repeat center center / $btn-close-width auto; // include transparent for button elements
+  background-clip: content-box;
+  border: 0; // for button elements
+  @include border-radius();
+  opacity: $btn-close-opacity;
 
   // Override <a>'s hover style
   &:hover {
-    color: $close-color;
+    color: $btn-close-color;
     text-decoration: none;
+    opacity: $btn-close-hover-opacity;
   }
 
-  &:hover,
   &:focus {
-    opacity: .75;
+    outline: none;
+    box-shadow: $btn-close-focus-shadow;
+    opacity: $btn-close-focus-opacity;
   }
 
   &:disabled,
   &.disabled {
     pointer-events: none;
+    user-select: none;
+    opacity: $btn-close-disabled-opacity;
   }
 }
 
-// Additional properties 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
-
-// stylelint-disable-next-line selector-no-qualifying-type
-button.close {
-  padding: 0;
-  background-color: transparent;
-  border: 0;
+.btn-close-white {
+  filter: $btn-close-white-filter;
 }
diff --git a/assets/stylesheets/bootstrap/_dropdown.scss b/assets/stylesheets/bootstrap/_dropdown.scss
index b30f2ba..fef1c9b 100644
--- a/assets/stylesheets/bootstrap/_dropdown.scss
+++ b/assets/stylesheets/bootstrap/_dropdown.scss
@@ -21,7 +21,7 @@
   z-index: $zindex-dropdown;
   display: none; // none by default, but block on "open" of the menu
   min-width: $dropdown-min-width;
-  padding: $dropdown-padding-y 0;
+  padding: $dropdown-padding-y $dropdown-padding-x;
   margin: $dropdown-spacer 0 0; // override default ul
   @include font-size($dropdown-font-size);
   color: $dropdown-color;
@@ -193,3 +193,44 @@
   padding: $dropdown-item-padding-y $dropdown-item-padding-x;
   color: $dropdown-link-color;
 }
+
+// Dark dropdowns
+.dropdown-menu-dark {
+  color: $dropdown-dark-color;
+  background-color: $dropdown-dark-bg;
+  border-color: $dropdown-dark-border-color;
+  @include box-shadow($dropdown-dark-box-shadow);
+
+  .dropdown-item {
+    color: $dropdown-dark-link-color;
+
+    &:hover,
+    &:focus {
+      color: $dropdown-dark-link-hover-color;
+      @include gradient-bg($dropdown-dark-link-hover-bg);
+    }
+
+    &.active,
+    &:active {
+      color: $dropdown-dark-link-active-color;
+      @include gradient-bg($dropdown-dark-link-active-bg);
+    }
+
+    &.disabled,
+    &:disabled {
+      color: $dropdown-dark-link-disabled-color;
+    }
+  }
+
+  .dropdown-divider {
+    border-color: $dropdown-dark-divider-bg;
+  }
+
+  .dropdown-item-text {
+    color: $dropdown-dark-link-color;
+  }
+
+  .dropdown-header {
+    color: $dropdown-dark-header-color;
+  }
+}
diff --git a/assets/stylesheets/bootstrap/_functions.scss b/assets/stylesheets/bootstrap/_functions.scss
index 980efb0..fd72c98 100644
--- a/assets/stylesheets/bootstrap/_functions.scss
+++ b/assets/stylesheets/bootstrap/_functions.scss
@@ -74,6 +74,9 @@
 }
 
 // See https://codepen.io/kevinweber/pen/dXWoRw
+//
+// Requires the use of quotes around data URIs.
+
 @function escape-svg($string) {
   @if str-index($string, "data:image/svg+xml") {
     @each $char, $encoded in $escaped-characters {
@@ -111,7 +114,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
     }
   }
 
-  @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}…";
+  @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
 
   @return $max-ratio-color;
 }
diff --git a/assets/stylesheets/bootstrap/_helpers.scss b/assets/stylesheets/bootstrap/_helpers.scss
index 1fdbc29..8f566d1 100644
--- a/assets/stylesheets/bootstrap/_helpers.scss
+++ b/assets/stylesheets/bootstrap/_helpers.scss
@@ -1,7 +1,7 @@
 @import "helpers/clearfix";
 @import "helpers/colored-links";
-@import "helpers/embed";
+@import "helpers/ratio";
 @import "helpers/position";
-@import "helpers/screenreaders";
+@import "helpers/visually-hidden";
 @import "helpers/stretched-link";
 @import "helpers/text-truncation";
diff --git a/assets/stylesheets/bootstrap/_list-group.scss b/assets/stylesheets/bootstrap/_list-group.scss
index 9fb11bf..b193790 100644
--- a/assets/stylesheets/bootstrap/_list-group.scss
+++ b/assets/stylesheets/bootstrap/_list-group.scss
@@ -112,7 +112,7 @@
           margin-top: 0;
         }
 
-        & + .list-group-item {
+        + .list-group-item {
           border-top-width: $list-group-border-width;
           border-left-width: 0;
 
diff --git a/assets/stylesheets/bootstrap/_mixins.scss b/assets/stylesheets/bootstrap/_mixins.scss
index 8c00f31..7b06cd8 100644
--- a/assets/stylesheets/bootstrap/_mixins.scss
+++ b/assets/stylesheets/bootstrap/_mixins.scss
@@ -12,7 +12,7 @@
 @import "mixins/breakpoints";
 @import "mixins/image";
 @import "mixins/resize";
-@import "mixins/screen-reader";
+@import "mixins/visually-hidden";
 @import "mixins/reset-text";
 @import "mixins/text-truncate";
 
diff --git a/assets/stylesheets/bootstrap/_modal.scss b/assets/stylesheets/bootstrap/_modal.scss
index 4451972..06ab564 100644
--- a/assets/stylesheets/bootstrap/_modal.scss
+++ b/assets/stylesheets/bootstrap/_modal.scss
@@ -56,9 +56,10 @@
 }
 
 .modal-dialog-scrollable {
-  max-height: subtract(100%, $modal-dialog-margin * 2);
+  height: subtract(100%, $modal-dialog-margin * 2);
 
   .modal-content {
+    max-height: 100%;
     overflow: hidden;
   }
 
@@ -111,16 +112,15 @@
 .modal-header {
   display: flex;
   flex-shrink: 0;
-  align-items: flex-start; // so the close btn always stays on the upper right corner
+  align-items: center;
   justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
   padding: $modal-header-padding;
   border-bottom: $modal-header-border-width solid $modal-header-border-color;
   @include border-top-radius($modal-content-inner-border-radius);
 
-  .close {
-    padding: $modal-header-padding;
-    // auto on the left force icon to the right even when there is no .modal-title
-    margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
+  .btn-close {
+    padding: ($modal-header-padding-y / 2) ($modal-header-padding-x / 2);
+    margin: ($modal-header-padding-y / -2) ($modal-header-padding-x / -2) ($modal-header-padding-y / -2) auto;
   }
 }
 
@@ -177,7 +177,7 @@
   }
 
   .modal-dialog-scrollable {
-    max-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
+    height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
   }
 
   .modal-dialog-centered {
diff --git a/assets/stylesheets/bootstrap/_nav.scss b/assets/stylesheets/bootstrap/_nav.scss
index 84d5224..30c2c81 100644
--- a/assets/stylesheets/bootstrap/_nav.scss
+++ b/assets/stylesheets/bootstrap/_nav.scss
@@ -14,11 +14,15 @@
 .nav-link {
   display: block;
   padding: $nav-link-padding-y $nav-link-padding-x;
+  @include font-size($nav-link-font-size);
+  font-weight: $nav-link-font-weight;
+  color: $nav-link-color;
   text-decoration: if($link-decoration == none, null, none);
   @include transition($nav-link-transition);
 
   &:hover,
   &:focus {
+    color: $nav-link-hover-color;
     text-decoration: if($link-hover-decoration == underline, none, null);
   }
 
diff --git a/assets/stylesheets/bootstrap/_navbar.scss b/assets/stylesheets/bootstrap/_navbar.scss
index 01d827f..607c317 100644
--- a/assets/stylesheets/bootstrap/_navbar.scss
+++ b/assets/stylesheets/bootstrap/_navbar.scss
@@ -155,6 +155,7 @@
     $next: breakpoint-next($breakpoint, $grid-breakpoints);
     $infix: breakpoint-infix($next, $grid-breakpoints);
 
+    // stylelint-disable-next-line scss/selector-no-union-class-name
     &#{$infix} {
       @include media-breakpoint-up($next) {
         flex-wrap: nowrap;
diff --git a/assets/stylesheets/bootstrap/_pagination.scss b/assets/stylesheets/bootstrap/_pagination.scss
index 40b100b..819f6d1 100644
--- a/assets/stylesheets/bootstrap/_pagination.scss
+++ b/assets/stylesheets/bootstrap/_pagination.scss
@@ -10,6 +10,7 @@
   text-decoration: if($link-decoration == none, null, none);
   background-color: $pagination-bg;
   border: $pagination-border-width solid $pagination-border-color;
+  @include transition($pagination-transition);
 
   &:hover {
     z-index: 2;
@@ -21,6 +22,8 @@
 
   &:focus {
     z-index: 3;
+    color: $pagination-focus-color;
+    background-color: $pagination-focus-bg;
     outline: $pagination-focus-outline;
     box-shadow: $pagination-focus-box-shadow;
   }
diff --git a/assets/stylesheets/bootstrap/_reboot.scss b/assets/stylesheets/bootstrap/_reboot.scss
index b3763d0..223adfd 100644
--- a/assets/stylesheets/bootstrap/_reboot.scss
+++ b/assets/stylesheets/bootstrap/_reboot.scss
@@ -69,7 +69,6 @@ body {
 //
 // 1. Reset Firefox's gray color
 // 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field
-//    See https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_hr_size
 
 hr {
   margin: $hr-margin-y 0;
@@ -369,12 +368,14 @@ caption {
   text-align: left;
 }
 
-// 1. Matches default `<td>` alignment by inheriting `text-align`.
-// 2. Fix alignment for Safari
+// 1. Removes font-weight bold by inheriting
+// 2. Matches default `<td>` alignment by inheriting `text-align`.
+// 3. Fix alignment for Safari
 
 th {
-  text-align: inherit; // 1
-  text-align: -webkit-match-parent; // 2
+  font-weight: $table-th-font-weight; // 1
+  text-align: inherit; // 2
+  text-align: -webkit-match-parent; // 3
 }
 
 thead,
@@ -401,7 +402,7 @@ label {
 // See https://github.com/twbs/bootstrap/issues/24093
 
 button {
-  // stylelint-disable-next-line property-blacklist
+  // stylelint-disable-next-line property-disallowed-list
   border-radius: 0;
 }
 
diff --git a/assets/stylesheets/bootstrap/_spinners.scss b/assets/stylesheets/bootstrap/_spinners.scss
index e8e4c04..9e083ea 100644
--- a/assets/stylesheets/bootstrap/_spinners.scss
+++ b/assets/stylesheets/bootstrap/_spinners.scss
@@ -13,7 +13,7 @@
   vertical-align: text-bottom;
   border: $spinner-border-width solid currentColor;
   border-right-color: transparent;
-  // stylelint-disable-next-line property-blacklist
+  // stylelint-disable-next-line property-disallowed-list
   border-radius: 50%;
   animation: spinner-border $spinner-animation-speed linear infinite;
 }
@@ -44,7 +44,7 @@
   height: $spinner-height;
   vertical-align: text-bottom;
   background-color: currentColor;
-  // stylelint-disable-next-line property-blacklist
+  // stylelint-disable-next-line property-disallowed-list
   border-radius: 50%;
   opacity: 0;
   animation: spinner-grow $spinner-animation-speed linear infinite;
diff --git a/assets/stylesheets/bootstrap/_tables.scss b/assets/stylesheets/bootstrap/_tables.scss
index 5ae45ff..47ffde1 100644
--- a/assets/stylesheets/bootstrap/_tables.scss
+++ b/assets/stylesheets/bootstrap/_tables.scss
@@ -40,7 +40,7 @@
 
   // Highlight border color between thead, tbody and tfoot.
   > :not(:last-child) > :last-child > * {
-    border-bottom-color: $table-group-seperator-color;
+    border-bottom-color: $table-group-separator-color;
   }
 }
 
diff --git a/assets/stylesheets/bootstrap/_toasts.scss b/assets/stylesheets/bootstrap/_toasts.scss
index 6aa5352..e2b98e6 100644
--- a/assets/stylesheets/bootstrap/_toasts.scss
+++ b/assets/stylesheets/bootstrap/_toasts.scss
@@ -1,13 +1,11 @@
 .toast {
   max-width: $toast-max-width;
-  overflow: hidden; // cheap rounded corners on nested items
   @include font-size($toast-font-size);
   color: $toast-color;
   background-color: $toast-background-color;
   background-clip: padding-box;
   border: $toast-border-width solid $toast-border-color;
   box-shadow: $toast-box-shadow;
-  backdrop-filter: blur(10px);
   opacity: 0;
   @include border-radius($toast-border-radius);
 
@@ -37,6 +35,12 @@
   background-color: $toast-header-background-color;
   background-clip: padding-box;
   border-bottom: $toast-border-width solid $toast-header-border-color;
+  @include border-top-radius(subtract($toast-border-radius, $toast-border-width));
+
+  .btn-close {
+    margin-right: $toast-padding-x / -2;
+    margin-left: $toast-padding-x;
+  }
 }
 
 .toast-body {
diff --git a/assets/stylesheets/bootstrap/_utilities.scss b/assets/stylesheets/bootstrap/_utilities.scss
index 79e52fd..e9a9b1e 100644
--- a/assets/stylesheets/bootstrap/_utilities.scss
+++ b/assets/stylesheets/bootstrap/_utilities.scss
@@ -23,7 +23,7 @@ $utilities: map-merge(
       print: true,
       property: display,
       class: d,
-      values: none inline inline-block block table table-row table-cell flex inline-flex
+      values: inline inline-block block table table-row table-cell flex inline-flex none
     ),
     "shadow": (
       property: box-shadow,
@@ -39,6 +39,29 @@ $utilities: map-merge(
       property: position,
       values: static relative absolute fixed sticky
     ),
+    "top": (
+      property: top,
+      values: $position-values
+    ),
+    "bottom": (
+      property: bottom,
+      values: $position-values
+    ),
+    "left": (
+      property: left,
+      values: $position-values
+    ),
+    "right": (
+      property: right,
+      values: $position-values
+    ),
+    "translate-middle": (
+      property: transform,
+      class: translate-middle,
+      values: (
+        null: (translateX(-50%) translateY(-50%))
+      )
+    ),
     "border": (
       property: border,
       values: (
@@ -79,6 +102,11 @@ $utilities: map-merge(
       class: border,
       values: map-merge($theme-colors, ("white": $white))
     ),
+    "border-width": (
+      property: border-width,
+      class: border,
+      values: $border-widths
+    ),
     // Sizing utilities
     "width": (
       property: width,
diff --git a/assets/stylesheets/bootstrap/_variables.scss b/assets/stylesheets/bootstrap/_variables.scss
index 2e0d0ce..e4d844f 100644
--- a/assets/stylesheets/bootstrap/_variables.scss
+++ b/assets/stylesheets/bootstrap/_variables.scss
@@ -38,9 +38,9 @@ $pink:    #d63384 !default;
 $red:     #dc3545 !default;
 $orange:  #fd7e14 !default;
 $yellow:  #ffc107 !default;
-$green:   #28a745 !default;
+$green:   #198754 !default;
 $teal:    #20c997 !default;
-$cyan:    #17a2b8 !default;
+$cyan:    #0dcaf0 !default;
 
 // scss-docs-start colors-map
 $colors: (
@@ -87,10 +87,10 @@ $theme-color-interval: 8% !default;
 
 // 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:   3 !default;
+$min-contrast-ratio:   4.5 !default;
 
 // Customize the light and dark text colors for use in our color contrast function.
-$color-contrast-dark:      $gray-900 !default;
+$color-contrast-dark:      $black !default;
 $color-contrast-light:     $white !default;
 
 // fusv-disable
@@ -197,11 +197,11 @@ $cyan-900: shade-color($cyan, 8) !default;
 
 // Characters which are escaped by the escape-svg function
 $escaped-characters: (
-  ("<","%3c"),
-  (">","%3e"),
-  ("#","%23"),
-  ("(","%28"),
-  (")","%29"),
+  ("<", "%3c"),
+  (">", "%3e"),
+  ("#", "%23"),
+  ("(", "%28"),
+  (")", "%29"),
 ) !default;
 
 // Options
@@ -246,6 +246,17 @@ $spacers: (
 
 $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
 
+// Position
+//
+// Define the edge positioning anchors of the position utilities.
+
+$position-values: (
+  0: 0,
+  50: 50%,
+  100: 100%
+) !default;
+
+
 // Body
 //
 // Settings for the `<body>` element.
@@ -325,7 +336,7 @@ $gutters: $spacers !default;
 
 // Container padding
 
-$container-padding-x: 1rem !default;
+$container-padding-x: $grid-gutter-width !default;
 
 
 // Components
@@ -338,6 +349,14 @@ $border-color:                $gray-300 !default;
 $border-radius:               .25rem !default;
 $border-radius-sm:            .2rem !default;
 $border-radius-lg:            .3rem !default;
+$border-widths: (
+  0: 0,
+  1: 1px,
+  2: 2px,
+  3: 3px,
+  4: 4px,
+  5: 5px
+) !default;
 
 $rounded-pill:                50rem !default;
 
@@ -357,26 +376,16 @@ $transition-base:             all .2s ease-in-out !default;
 $transition-fade:             opacity .15s linear !default;
 $transition-collapse:         height .35s ease !default;
 
-// scss-docs-start embed-responsive-aspect-ratios
-$embed-responsive-aspect-ratios: (
-  "21by9": (
-    x: 21,
-    y: 9
-  ),
-  "16by9": (
-    x: 16,
-    y: 9
-  ),
-  "4by3": (
-    x: 4,
-    y: 3
-  ),
-  "1by1": (
-    x: 1,
-    y: 1
-  )
+// stylelint-disable function-disallowed-list
+// scss-docs-start aspect-ratios
+$aspect-ratios: (
+  "1x1": 100%,
+  "4x3": calc(3 / 4 * 100%),
+  "16x9": calc(9 / 16 * 100%),
+  "21x9": calc(9 / 21 * 100%)
 ) !default;
-// scss-docs-end embed-responsive-aspect-ratios
+// scss-docs-end aspect-ratios
+// stylelint-enable function-disallowed-list
 
 // Typography
 //
@@ -487,6 +496,8 @@ $table-cell-vertical-align:   top !default;
 $table-color:                 $body-color !default;
 $table-bg:                    transparent !default;
 
+$table-th-font-weight:        null !default;
+
 $table-striped-color:         $table-color !default;
 $table-striped-bg-factor:     .05 !default;
 $table-striped-bg:            rgba($black, $table-striped-bg-factor) !default;
@@ -505,7 +516,7 @@ $table-border-color:          $border-color !default;
 
 $table-striped-order:         odd !default;
 
-$table-group-seperator-color: currentColor !default;
+$table-group-separator-color: currentColor !default;
 
 $table-caption-color:         $text-muted !default;
 
@@ -534,7 +545,7 @@ $input-btn-font-family:       null !default;
 $input-btn-font-size:         $font-size-base !default;
 $input-btn-line-height:       $line-height-base !default;
 
-$input-btn-focus-width:         .2rem !default;
+$input-btn-focus-width:         .25rem !default;
 $input-btn-focus-color-opacity: .25 !default;
 $input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity) !default;
 $input-btn-focus-box-shadow:    0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
@@ -656,7 +667,7 @@ $input-height-lg:                       add($input-line-height * 1em, add($input
 $input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 
 
-$form-check-input-width:                  1.25em !default;
+$form-check-input-width:                  1em !default;
 $form-check-min-height:                   $font-size-base * $line-height-base !default;
 $form-check-padding-left:                 $form-check-input-width + .5em !default;
 $form-check-margin-bottom:                .125rem !default;
@@ -699,6 +710,9 @@ $form-switch-checked-bg-position: right center !default;
 
 $form-check-inline-margin-right:        1rem !default;
 
+$input-group-addon-padding-y:           $input-padding-y !default;
+$input-group-addon-padding-x:           $input-padding-x !default;
+$input-group-addon-font-weight:         $input-font-weight !default;
 $input-group-addon-color:               $input-color !default;
 $input-group-addon-bg:                  $gray-200 !default;
 $input-group-addon-border-color:        $input-border-color !default;
@@ -841,6 +855,10 @@ $zindex-tooltip:                    1070 !default;
 
 $nav-link-padding-y:                .5rem !default;
 $nav-link-padding-x:                1rem !default;
+$nav-link-font-size:                null !default;
+$nav-link-font-weight:              null !default;
+$nav-link-color:                    null !default;
+$nav-link-hover-color:              null !default;
 $nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
 $nav-link-disabled-color:           $gray-600 !default;
 
@@ -903,6 +921,7 @@ $navbar-dark-brand-hover-color:           $navbar-dark-active-color !default;
 // Dropdown menu container and contents.
 
 $dropdown-min-width:                10rem !default;
+$dropdown-padding-x:                0 !default;
 $dropdown-padding-y:                .5rem !default;
 $dropdown-spacer:                   .125rem !default;
 $dropdown-font-size:                $font-size-base !default;
@@ -912,7 +931,7 @@ $dropdown-border-color:             rgba($black, .15) !default;
 $dropdown-border-radius:            $border-radius !default;
 $dropdown-border-width:             $border-width !default;
 $dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width) !default;
-$dropdown-divider-bg:               $gray-200 !default;
+$dropdown-divider-bg:               $dropdown-border-color !default;
 $dropdown-divider-margin-y:         $spacer / 2 !default;
 $dropdown-box-shadow:               $box-shadow !default;
 
@@ -931,6 +950,19 @@ $dropdown-item-padding-x:           $spacer !default;
 $dropdown-header-color:             $gray-600 !default;
 $dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x !default;
 
+$dropdown-dark-color:               $gray-300 !default;
+$dropdown-dark-bg:                  $gray-800 !default;
+$dropdown-dark-border-color:        $dropdown-border-color !default;
+$dropdown-dark-divider-bg:          $dropdown-divider-bg !default;
+$dropdown-dark-box-shadow:          null !default;
+$dropdown-dark-link-color:          $dropdown-dark-color !default;
+$dropdown-dark-link-hover-color:    $white !default;
+$dropdown-dark-link-hover-bg:       rgba($white, .15) !default;
+$dropdown-dark-link-active-color:   $dropdown-link-active-color !default;
+$dropdown-dark-link-active-bg:      $dropdown-link-active-bg !default;
+$dropdown-dark-link-disabled-color: $gray-500 !default;
+$dropdown-dark-header-color:        $gray-500 !default;
+
 
 // Pagination
 
@@ -948,6 +980,8 @@ $pagination-border-radius:          $border-radius !default;
 $pagination-margin-left:            -$pagination-border-width !default;
 $pagination-border-color:           $gray-300 !default;
 
+$pagination-focus-color:            $link-hover-color !default;
+$pagination-focus-bg:               $gray-200 !default;
 $pagination-focus-box-shadow:       $input-btn-focus-box-shadow !default;
 $pagination-focus-outline:          0 !default;
 
@@ -963,6 +997,7 @@ $pagination-disabled-color:         $gray-600 !default;
 $pagination-disabled-bg:            $white !default;
 $pagination-disabled-border-color:  $gray-300 !default;
 
+$pagination-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 
 // Cards
 
@@ -1042,7 +1077,7 @@ $popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default
 
 $toast-max-width:                   350px !default;
 $toast-padding-x:                   .75rem !default;
-$toast-padding-y:                   .25rem !default;
+$toast-padding-y:                   .5rem !default;
 $toast-font-size:                   .875rem !default;
 $toast-color:                       null !default;
 $toast-background-color:            rgba($white, .85) !default;
@@ -1061,8 +1096,8 @@ $toast-header-border-color:         rgba(0, 0, 0, .05) !default;
 $badge-font-size:                   .75em !default;
 $badge-font-weight:                 $font-weight-bold !default;
 $badge-color:                       $white !default;
-$badge-padding-y:                   .25em !default;
-$badge-padding-x:                   .5em !default;
+$badge-padding-y:                   .35em !default;
+$badge-padding-x:                   .65em !default;
 $badge-border-radius:               $border-radius !default;
 
 
@@ -1124,6 +1159,8 @@ $alert-bg-level:                    -10 !default;
 $alert-border-level:                -9 !default;
 $alert-color-level:                 6 !default;
 
+$alert-dismissible-padding-r:       $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
+
 
 // Progress bars
 
@@ -1217,14 +1254,18 @@ $carousel-caption-color:             $white !default;
 $carousel-caption-padding-y:         1.25rem !default;
 $carousel-caption-spacer:            1.25rem !default;
 
-$carousel-control-icon-width:        20px !default;
+$carousel-control-icon-width:        2rem !default;
 
-$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/></svg>") !default;
-$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/></svg>") !default;
+$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 16 16'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>") !default;
+$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 16 16'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>") !default;
 
 $carousel-transition-duration:       .6s !default;
 $carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
 
+$carousel-dark-indicator-active-bg:  $black !default;
+$carousel-dark-caption-color:        $black !default;
+$carousel-dark-control-icon-filter:  invert(1) grayscale(100) !default;
+
 
 // Spinners
 
@@ -1240,11 +1281,18 @@ $spinner-border-width-sm: .2em !default;
 
 // Close
 
-$close-font-size:                   $font-size-base * 1.5 !default;
-$close-font-weight:                 $font-weight-bold !default;
-$close-color:                       $black !default;
-$close-text-shadow:                 0 1px 0 $white !default;
-
+$btn-close-width:            1em !default;
+$btn-close-height:           $btn-close-width !default;
+$btn-close-padding-x:        .25em !default;
+$btn-close-padding-y:        $btn-close-padding-x !default;
+$btn-close-color:            $black !default;
+$btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$btn-close-color}' viewBox='0 0 16 16'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
+$btn-close-focus-shadow:     $input-btn-focus-box-shadow !default;
+$btn-close-opacity:          .5 !default;
+$btn-close-hover-opacity:    .75 !default;
+$btn-close-focus-opacity:    1 !default;
+$btn-close-disabled-opacity: .25 !default;
+$btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%) !default;
 
 // Code
 
diff --git a/assets/stylesheets/bootstrap/bootstrap-utilities.scss b/assets/stylesheets/bootstrap/bootstrap-utilities.scss
index e4790cf..3edb9fd 100644
--- a/assets/stylesheets/bootstrap/bootstrap-utilities.scss
+++ b/assets/stylesheets/bootstrap/bootstrap-utilities.scss
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Utilities v5.0.0-alpha1 (https://getbootstrap.com/)
+ * Bootstrap Utilities v5.0.0-alpha2 (https://getbootstrap.com/)
  * Copyright 2011-2020 The Bootstrap Authors
  * Copyright 2011-2020 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
diff --git a/assets/stylesheets/bootstrap/forms/_form-check.scss b/assets/stylesheets/bootstrap/forms/_form-check.scss
index f163578..84e3e57 100644
--- a/assets/stylesheets/bootstrap/forms/_form-check.scss
+++ b/assets/stylesheets/bootstrap/forms/_form-check.scss
@@ -33,7 +33,7 @@
   }
 
   &[type="radio"] {
-    // stylelint-disable-next-line property-blacklist
+    // stylelint-disable-next-line property-disallowed-list
     border-radius: $form-check-radio-border-radius;
   }
 
diff --git a/assets/stylesheets/bootstrap/forms/_input-group.scss b/assets/stylesheets/bootstrap/forms/_input-group.scss
index c8e86ce..7a9a14d 100644
--- a/assets/stylesheets/bootstrap/forms/_input-group.scss
+++ b/assets/stylesheets/bootstrap/forms/_input-group.scss
@@ -62,9 +62,9 @@
 .input-group-text {
   display: flex;
   align-items: center;
-  padding: $input-padding-y $input-padding-x;
+  padding: $input-group-addon-padding-y $input-group-addon-padding-x;
   @include font-size($input-font-size); // Match inputs
-  font-weight: $font-weight-normal;
+  font-weight: $input-group-addon-font-weight;
   line-height: $input-line-height;
   color: $input-group-addon-color;
   text-align: center;
diff --git a/assets/stylesheets/bootstrap/helpers/_colored-links.scss b/assets/stylesheets/bootstrap/helpers/_colored-links.scss
index 4eea8d3..d135194 100644
--- a/assets/stylesheets/bootstrap/helpers/_colored-links.scss
+++ b/assets/stylesheets/bootstrap/helpers/_colored-links.scss
@@ -5,7 +5,7 @@
     @if $emphasized-link-hover-darken-percentage != 0 {
       &:hover,
       &:focus {
-        color: darken($value, $emphasized-link-hover-darken-percentage);
+        color: if(color-contrast($value) == $color-contrast-light, darken($value, $emphasized-link-hover-darken-percentage), lighten($value, $emphasized-link-hover-darken-percentage));
       }
     }
   }
diff --git a/assets/stylesheets/bootstrap/helpers/_embed.scss b/assets/stylesheets/bootstrap/helpers/_embed.scss
deleted file mode 100644
index 924fc0e..0000000
--- a/assets/stylesheets/bootstrap/helpers/_embed.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-// Credit: Nicolas Gallagher and SUIT CSS.
-
-.embed-responsive {
-  position: relative;
-  width: 100%;
-
-  &::before {
-    display: block;
-    content: "";
-  }
-
-  .embed-responsive-item,
-  iframe,
-  embed,
-  object,
-  video {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-}
-
-@each $key, $ratio in $embed-responsive-aspect-ratios {
-  .embed-responsive-#{$key} {
-    &::before {
-      padding-top: percentage(map-get($ratio, y) / map-get($ratio, x));
-    }
-  }
-}
diff --git a/assets/stylesheets/bootstrap/helpers/_ratio.scss b/assets/stylesheets/bootstrap/helpers/_ratio.scss
new file mode 100644
index 0000000..3c0ff33
--- /dev/null
+++ b/assets/stylesheets/bootstrap/helpers/_ratio.scss
@@ -0,0 +1,26 @@
+// Credit: Nicolas Gallagher and SUIT CSS.
+
+.ratio {
+  position: relative;
+  width: 100%;
+
+  &::before {
+    display: block;
+    padding-top: var(--aspect-ratio);
+    content: "";
+  }
+
+  > * {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@each $key, $ratio in $aspect-ratios {
+  .ratio-#{$key} {
+    --aspect-ratio: #{$ratio};
+  }
+}
diff --git a/assets/stylesheets/bootstrap/helpers/_screenreaders.scss b/assets/stylesheets/bootstrap/helpers/_screenreaders.scss
deleted file mode 100644
index c8034d1..0000000
--- a/assets/stylesheets/bootstrap/helpers/_screenreaders.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-//
-// Screenreaders
-//
-
-.sr-only,
-.sr-only-focusable:not(:focus) {
-  @include sr-only();
-}
diff --git a/assets/stylesheets/bootstrap/helpers/_visually-hidden.scss b/assets/stylesheets/bootstrap/helpers/_visually-hidden.scss
new file mode 100644
index 0000000..0a843d3
--- /dev/null
+++ b/assets/stylesheets/bootstrap/helpers/_visually-hidden.scss
@@ -0,0 +1,8 @@
+//
+// Visually hidden
+//
+
+.visually-hidden,
+.visually-hidden-focusable:not(:focus) {
+  @include visually-hidden();
+}
diff --git a/assets/stylesheets/bootstrap/mixins/_border-radius.scss b/assets/stylesheets/bootstrap/mixins/_border-radius.scss
index aee9bf3..70f5720 100644
--- a/assets/stylesheets/bootstrap/mixins/_border-radius.scss
+++ b/assets/stylesheets/bootstrap/mixins/_border-radius.scss
@@ -1,4 +1,4 @@
-// stylelint-disable property-blacklist
+// stylelint-disable property-disallowed-list
 // Single side border-radius
 
 // Helper function to replace negative values with 0
@@ -23,53 +23,53 @@
   }
 }
 
-@mixin border-top-radius($radius) {
+@mixin border-top-radius($radius: $border-radius) {
   @if $enable-rounded {
     border-top-left-radius: valid-radius($radius);
     border-top-right-radius: valid-radius($radius);
   }
 }
 
-@mixin border-right-radius($radius) {
+@mixin border-right-radius($radius: $border-radius) {
   @if $enable-rounded {
     border-top-right-radius: valid-radius($radius);
     border-bottom-right-radius: valid-radius($radius);
   }
 }
 
-@mixin border-bottom-radius($radius) {
+@mixin border-bottom-radius($radius: $border-radius) {
   @if $enable-rounded {
     border-bottom-right-radius: valid-radius($radius);
     border-bottom-left-radius: valid-radius($radius);
   }
 }
 
-@mixin border-left-radius($radius) {
+@mixin border-left-radius($radius: $border-radius) {
   @if $enable-rounded {
     border-top-left-radius: valid-radius($radius);
     border-bottom-left-radius: valid-radius($radius);
   }
 }
 
-@mixin border-top-left-radius($radius) {
+@mixin border-top-left-radius($radius: $border-radius) {
   @if $enable-rounded {
     border-top-left-radius: valid-radius($radius);
   }
 }
 
-@mixin border-top-right-radius($radius) {
+@mixin border-top-right-radius($radius: $border-radius) {
   @if $enable-rounded {
     border-top-right-radius: valid-radius($radius);
   }
 }
 
-@mixin border-bottom-right-radius($radius) {
+@mixin border-bottom-right-radius($radius: $border-radius) {
   @if $enable-rounded {
     border-bottom-right-radius: valid-radius($radius);
   }
 }
 
-@mixin border-bottom-left-radius($radius) {
+@mixin border-bottom-left-radius($radius: $border-radius) {
   @if $enable-rounded {
     border-bottom-left-radius: valid-radius($radius);
   }
diff --git a/assets/stylesheets/bootstrap/mixins/_box-shadow.scss b/assets/stylesheets/bootstrap/mixins/_box-shadow.scss
index 0726d43..4172541 100644
--- a/assets/stylesheets/bootstrap/mixins/_box-shadow.scss
+++ b/assets/stylesheets/bootstrap/mixins/_box-shadow.scss
@@ -2,17 +2,15 @@
   @if $enable-shadows {
     $result: ();
 
-    @if (length($shadow) == 1) {
-      // We can pass `@include box-shadow(none);`
-      $result: $shadow;
-    } @else {
-      // Filter to avoid invalid properties for example `box-shadow: none, 1px 1px black;`
-      @for $i from 1 through length($shadow) {
-        @if nth($shadow, $i) != "none" {
-          $result: append($result, nth($shadow, $i), "comma");
-        }
+    @each $value in $shadow {
+      @if $value != null {
+        $result: append($result, $value, "comma");
+      }
+      @if $value == none and length($shadow) > 1 {
+        @warn "The keyword 'none' must be used as a single argument.";
       }
     }
+
     @if (length($result) > 0) {
       box-shadow: $result;
     }
diff --git a/assets/stylesheets/bootstrap/mixins/_breakpoints.scss b/assets/stylesheets/bootstrap/mixins/_breakpoints.scss
index 66a0050..cdc8034 100644
--- a/assets/stylesheets/bootstrap/mixins/_breakpoints.scss
+++ b/assets/stylesheets/bootstrap/mixins/_breakpoints.scss
@@ -107,8 +107,9 @@
 // No minimum for the smallest breakpoint, and no maximum for the largest one.
 // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
 @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
-  $min: breakpoint-min($name, $breakpoints);
-  $max: breakpoint-max(breakpoint-next($name, $breakpoints));
+  $min:  breakpoint-min($name, $breakpoints);
+  $next: breakpoint-next($name, $breakpoints);
+  $max:  breakpoint-max($next);
 
   @if $min != null and $max != null {
     @media (min-width: $min) and (max-width: $max) {
@@ -119,7 +120,7 @@
       @content;
     }
   } @else if $min == null {
-    @include media-breakpoint-down($name, $breakpoints) {
+    @include media-breakpoint-down($next, $breakpoints) {
       @content;
     }
   }
diff --git a/assets/stylesheets/bootstrap/mixins/_buttons.scss b/assets/stylesheets/bootstrap/mixins/_buttons.scss
index 09ef0cb..eeade6a 100644
--- a/assets/stylesheets/bootstrap/mixins/_buttons.scss
+++ b/assets/stylesheets/bootstrap/mixins/_buttons.scss
@@ -7,12 +7,15 @@
   $background,
   $border,
   $color: color-contrast($background),
-  $hover-background: darken($background, 7.5%),
-  $hover-border: darken($border, 10%),
+  $hover-background: if($color == $color-contrast-light, darken($background, 7.5%), lighten($background, 7.5%)),
+  $hover-border: if($color == $color-contrast-light, darken($border, 10%), lighten($border, 5%)),
   $hover-color: color-contrast($hover-background),
-  $active-background: darken($background, 10%),
-  $active-border: darken($border, 12.5%),
-  $active-color: color-contrast($active-background)
+  $active-background: if($color == $color-contrast-light, darken($background, 10%), lighten($background, 10%)),
+  $active-border: if($color == $color-contrast-light, darken($border, 12.5%), lighten($border, 5%)),
+  $active-color: color-contrast($active-background),
+  $disabled-background: $background,
+  $disabled-border: $border,
+  $disabled-color: color-contrast($disabled-background)
 ) {
   color: $color;
   @include gradient-bg($background);
@@ -61,11 +64,11 @@
 
   &:disabled,
   &.disabled {
-    color: $color;
-    background-color: $background;
+    color: $disabled-color;
+    background-color: $disabled-background;
     // Remove CSS gradients if they're enabled
     background-image: if($enable-gradients, none, null);
-    border-color: $border;
+    border-color: $disabled-border;
   }
 }
 
diff --git a/assets/stylesheets/bootstrap/mixins/_container.scss b/assets/stylesheets/bootstrap/mixins/_container.scss
index 435d003..f391c22 100644
--- a/assets/stylesheets/bootstrap/mixins/_container.scss
+++ b/assets/stylesheets/bootstrap/mixins/_container.scss
@@ -1,9 +1,11 @@
 // Container mixins
 
-@mixin make-container($padding-x: $container-padding-x) {
+@mixin make-container($gutter: $container-padding-x) {
+  --bs-gutter-x: #{$gutter};
+
   width: 100%;
-  padding-right: $padding-x;
-  padding-left: $padding-x;
+  padding-right: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-disallowed-list
+  padding-left: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-disallowed-list
   margin-right: auto;
   margin-left: auto;
 }
diff --git a/assets/stylesheets/bootstrap/mixins/_grid.scss b/assets/stylesheets/bootstrap/mixins/_grid.scss
index 0ef9d1f..a229199 100644
--- a/assets/stylesheets/bootstrap/mixins/_grid.scss
+++ b/assets/stylesheets/bootstrap/mixins/_grid.scss
@@ -6,11 +6,10 @@
   --bs-gutter-x: #{$gutter};
   --bs-gutter-y: 0;
   display: flex;
-  flex: 1 0 100%;
   flex-wrap: wrap;
-  margin-top: calc(var(--bs-gutter-y) * -1); // stylelint-disable-line function-blacklist
-  margin-right: calc(var(--bs-gutter-x) / -2); // stylelint-disable-line function-blacklist
-  margin-left: calc(var(--bs-gutter-x) / -2); // stylelint-disable-line function-blacklist
+  margin-top: calc(var(--bs-gutter-y) * -1); // stylelint-disable-line function-disallowed-list
+  margin-right: calc(var(--bs-gutter-x) / -2); // stylelint-disable-line function-disallowed-list
+  margin-left: calc(var(--bs-gutter-x) / -2); // stylelint-disable-line function-disallowed-list
 }
 
 @mixin make-col-ready($gutter: $grid-gutter-width) {
@@ -22,8 +21,8 @@
   flex-shrink: 0;
   width: 100%;
   max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
-  padding-right: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-blacklist
-  padding-left: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-blacklist
+  padding-right: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-disallowed-list
+  padding-left: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-disallowed-list
   margin-top: var(--bs-gutter-y);
 }
 
@@ -48,7 +47,7 @@
 // numberof columns. Supports wrapping to new lines, but does not do a Masonry
 // style grid.
 @mixin row-cols($count) {
-  & > * {
+  > * {
     flex: 0 0 auto;
     width: 100% / $count;
   }
diff --git a/assets/stylesheets/bootstrap/mixins/_transition.scss b/assets/stylesheets/bootstrap/mixins/_transition.scss
index bf4c00a..d437f6d 100644
--- a/assets/stylesheets/bootstrap/mixins/_transition.scss
+++ b/assets/stylesheets/bootstrap/mixins/_transition.scss
@@ -1,4 +1,4 @@
-// stylelint-disable property-blacklist
+// stylelint-disable property-disallowed-list
 @mixin transition($transition...) {
   @if length($transition) == 0 {
     $transition: $transition-base;
diff --git a/assets/stylesheets/bootstrap/mixins/_screen-reader.scss b/assets/stylesheets/bootstrap/mixins/_visually-hidden.scss
index b25fe73..d980696 100644
--- a/assets/stylesheets/bootstrap/mixins/_screen-reader.scss
+++ b/assets/stylesheets/bootstrap/mixins/_visually-hidden.scss
@@ -1,11 +1,11 @@
 // stylelint-disable declaration-no-important
 
-// Only display content to screen readers
+// Hide content visually while keeping it accessible to assistive technologies
 //
-// See: https://a11yproject.com/posts/how-to-hide-content/
+// See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
 // See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
 
-@mixin sr-only {
+@mixin visually-hidden() {
   position: absolute !important;
   width: 1px !important;
   height: 1px !important;
@@ -21,8 +21,8 @@
 //
 // Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
 
-@mixin sr-only-focusable {
+@mixin visually-hidden-focusable() {
   &:not(:focus) {
-    @include sr-only();
+    @include visually-hidden();
   }
 }